Front End API can't find Back End Endpoint

Question

I am trying to link make an API call to my back end to test that my server is running. I am using React on the front and and Node.js with express on the back end.

My back end endpoint is very simple:

app.get('/', (req, res) => {
    console.log('hit')
    const name = req.query.name || 'World';
    res.setHeader('Content-Type', 'application/json');
    res.send({
        greeting: `Hello ${name}!`,
    });
});

and on the front end I am making the request:

  React.useEffect(() => {
    fetch('http://localhost:3001//')
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
      })
      .catch(console.log('error'));
  });

I added console logs to try and track down the mistake. I get 'error' logged to the console. Additionally I get console errors that read:

Access to fetch at 'http://localhost:3001/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
manifest.json:1 GET http://localhost:3000/manifest.json 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

I haven't seen this manifest.json warning before.

Does this answer your question? [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) — Ian Kemp, Aug 13 '20 at 15:09
Please use cors with express https://expressjs.com/en/resources/middleware/cors.html — Aniruddha Bera, Aug 13 '20 at 15:10
Ignore the `manifest.json error`, it's just Chrome doing Chrome things. — Ian Kemp, Aug 13 '20 at 15:12

5eb · Accepted Answer · 2020-08-13T15:08:11.593

1

I think it's because the fetch on the frontend is calling http://localhost:3000 (3000 is probably the port of your frontend). So your fetch doesn't target the backend.

So you would need to do something like this:

fetch('http://localhost:8000') // etc...

Change 8000 to whatever port your backend is listening on.

Update

For the second issue, like the error message is saying you should set the Access-Control-Allow-Origin header so the backend knows to allow your frontend to make a request to it.

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

So you can put the above line in your '/' route in the backend or you can create some middleware so you don't have to set it for every request: No 'Access-Control-Allow-Origin' - Node / Apache Port Issue.

edited Aug 13 '20 at 15:08

answered Aug 13 '20 at 14:53

5eb

14,798
5
21
65

This made some progress. I know see the console log 'hit' so I know my server is getting hit, but I still see the error messages regarding the manifest.json. And now there is a new error (See Above). – tdammon Aug 13 '20 at 15:03
Thank you. I still have that manifest.json issue but now I am getting a response from my server. – tdammon Aug 13 '20 at 15:11

score 1 · Answer 2 · answered Aug 13 '20 at 15:11

Two things. First, you need to add an 'Access-Control-Allow-Origin' header to your server's response. Second, you have a manifest.json missing, so you have to add it. The default one created by CRA is:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

and you put it in your /public folder. You also have to put this link in your index.html:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Front End API can't find Back End Endpoint

2 Answers2