如何使用带有 expressjs 后端的 create-react-app 在部署中正确进行 api 调用？

Question

I am trying to deploy a react application to the server.

When my deployed app tries to make calls to an api on the same server it receives the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3045/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://xxx.xxx.x.xx:5000’).

The package.json file has the proxy specified:

  "proxy": "http://localhost:3045",

And here is my api call:

fetch('/login',
      {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          password
        })
      })).json()

What confused me further, when I had the site being served from the remote server, accessed it from my own local machine, and had the backend being served on my local machine, the site was making calls to my own local port(successfully, once I noticed what was going on and changed the cors config origin to the remote server's ip to test), and accessed the api being served from my local machine, instead of on it's (the remote deployment server's) own local port.

My cors config on the remote server api:

app.use(
  cors({
    origin: 'http://localhost:5000',
    credentials: true,
  }),

What changes do I need to make so that my site is making api calls to its own local ports, instead of the clients?

Answer 1

From memory (and running into a similar issue) proxying isn't mean to work when you deploy.

See Create-React-App Proxy in Production Build

Answer 2

Try setting it up without any special cors module:

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5000');//If it doesn't work, change it to "*"
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,token');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});