无法解决反应和节点应用程序中的 cors 错误

Question

I have just deployed a react/express app in Heroku which initially worked for a couple of minutes but then the dreaded cors error came up which I can never seem to fix. I've tried everything else suggested on other posts but nothing seems to work for me.

I've tried adding a proxy in my react app with:

 "proxy": "http://127.0.0.1:4000", (and also trying) ->
 "proxy": "http://localhost:4000", 

This didn't work so I tried adding the cors package in node which didn't work either. This is driving me crazy and I don't know what else I can try.

const app = require("./app");
const cors = require("cors");

app.use(
  cors({
    allowedHeaders: ["authorization", "Content-Type"], // you can change the headers
    exposedHeaders: ["authorization"], // you can change the headers
    origin: "*",
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    preflightContinue: false
  });
);
const port = process.env.PORT || 4000;

app.listen(port, () => {
  console.log(`Listening on ${port}`);
});

I'm using axios for requests for example:

const allMoviesData = await axios.get("/movies?limit=12");

In chrome I get:

GET http://localhost:4000/movies?limit=12 net::ERR_CONNECTION_REFUSED
(anonymous) @ bundle.js:31
bundle.js:31 Uncaught (in promise) Error: Network Error
    at e.exports (bundle.js:31)
    at XMLHttpRequest.d.onerror (bundle.js:31)

In firefox I get:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4000/movies?limit=12&searchBy=genres&filter=adventure.

Uncaught (in promise) Error: Network Error
    exports http://localhost:3000/bundle.js:31
    onerror http://localhost:3000/bundle.js:31

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4000/movies?limit=12. (Reason: CORS request did not succeed).

Any other suggestions would be appreciated.

Answer 1

Check the request and response headers.

The bluish parts should be the same.

If they are not the same for you, that means whatever you are doing, isn't working like it should be.