React+Express：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 access-control-allow-origin

Question

I am running a node/express server that is currently my backend and is hosting the API. I can access the API on port 123 with postman just fine. I am creating my frontend in React and trying to access the API to get some data. However, when I try to navigate to the page I get the following error in the console.

Access to XMLHttpRequest at 'http://abc:123/test' from origin 'http://abc:456' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
createError.js:17 Uncaught (in promise) Error: Network Error
    at createError (createError.js:17)
    at XMLHttpRequest.handleError (xhr.js:80)

I have added the following to my server however still receiving the error, any suggestion on what I could be missing?

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization");
    next();
})

In my React code I am using axios to make a post request to the API

axios.post("http://abc:123/test", {
        'data': '12346'
    }).then(response => {
        console.log(response);
    })

Answer 1

I don't really know, but it seems like you can add proxy": " http://abc:123 " to your package.json file
Example:

"proxy": "http://abc:123",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

And then:

axios.post("/test", {
        'data': '12346'
    }).then(response => {
        console.log(response);
    })

does fetch works? Can you try with fetch?

Answer 2

The pre flight request is an OPTIONS request, you only answer POST requests. Add

  app.post(/*...*/);

  app.options("http://abc:123/test", (req, res) =>
    res.status(200).send("Feel free to send the real request now :)")
  );

Or add something like the npm cors package, that does that for you too.