TypeError: NetworkError when attempting to fetch resource

Question

I obtain this problem :

Response { type: "cors", url: "http://localhost:3000/api/marks",
redirected: false, 
status: 200, 
ok: true, 
statusText: "OK", 
headers: Headers, 
body: ReadableStream, 
bodyUsed: true }
MarkService.js:5
Cross-Origin Request Blocked: 
The Same Origin Policy disallows reading the remote resource at      
http://localhost:3000/api/marks. (Reason: CORS request did not succeed). 

This is where it points

class MarkService {
  constructor() {
    this.URI = `localhost:3000/api/marks`;
  }

  async getMarks() {
    const response = await fetch(this.URI);
    const marks = await response.json();
    return marks;
  }
}
export default MarkService;

I'm trying to make a app with express in the backend and Webpack for the frontend. I have a Rest API in the backend and I can't use it on the frontend.

I'm using Ubuntu with Mozilla Firefox 66.0.2 and Nodejs 11.13.0

When I use the console, it said that the problem is in it

Answer 1

As i can see for this error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/api/marks. (Reason: CORS request did not succeed)

it says that a CORS error has occurred, and that's because the front-end and back-end are hosted under different domain or ports if on localhost, lets explain this a little bet further.

CORS which stands for Cross Origin Resource Sharing is a security policy that applies only to Javascript (Browsers) that blocks websites from accessing other websites using AJAX unless they are explicitly approved using headers.

To solve this, you need to pass certain headers in the response from the server side that approves CORS for the requesting domain, headers & methods

You can read this article for deep knowledge about CORS Or you can check this link to know how to solve the issue your facing

And there is this NPM Package for nodejs to help you with CORS