TypeError: “NetworkError when attempting to fetch resource.”

Question

I\'ve found a lot of question similar to my problem but I don\'t get solution that\'s why I\'ve asked here.

I\'ve just started learning front end development using React

Answer 1

URI Schema Mismatch

The Origin request header set within the headers interface of your fetch request contains the host: localhost:3000. The Access-Control-Allow-Origin CORS header that is configured within the CORS middleware contains the host: http://localhost:3000/. The URI scheme/host/port tuple defined must be an exact match in both the fetch request and CORS middlewares.

Change both of your URLs to http://localhost:3000

See: Fetch Spec, CORS Spec and CORS for Developers

Chrome Bug

Just to note, Chrome does not support CORS Requests for localhost. You can find the documented Chrome bug here. There are some workarounds listed within the bug, if need.