0

I have already read a lot of other stackoverflow questions and github issues but none were able to resolve my issue so i decided to open a new one.

I am building a short application with Nextjs (frontend) and Express+Node (backend). Everytime the Frontend makes a get/post request to the backend via REST I get

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at DOMAIN. (Reason: CORS header 'Access-Control-Allow-Origin' missing)."

To fix this, i tried multiple things. First of all i added app.use(cors()) in my backend, but that didnt work. I added

const configcors = {
    origin: true,
    methods: 'GET,HEAD,POST,PUT,DELETE,CONNECT,OPTIONS,TRACE,PATCH',
    allowedHeaders: 'X-Powered-By,Content-Type,Content-Length,ETag,Date,Connection,Keep-Alive',
    exposedHeaders: 'X-Powered-By,Content-Type,Content-Length,ETag,Date,Connection,Keep-Alive',
    credentials: true
}
app.use(cors(configcors))

to allow absolutely everything but that didnt work either. i tried to add the headers manually using

app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
  });

which - as you might expect - didnt work either. Lastly i thought if maybe there was an error with the preflight, so i tried

app.options('*', cors(configcors))

which didnt work either. Furthermore, trying to solve the problem, i looked at the network tab, to identify the headers and whether the correct headers were send. In Firefox there appeared no Request in the Networking Tab at all.

Chrome: request in network tab with chrome

On chrome tho, i can see the request but there are no response headers at all. This let me assume that maybe CORS wasnt the problem - To try this i installed the moesif CORS extension in chrome to allow all sorts of CORS. I was wrong: with the extension enabled, every request works perfectly fine - but i cant rely on an extension in production.

This means that the error definitely has something to do with CORS but I have no idea what I should do now.

if anyone had similiar troubles i would be very thankful for your advice.

JGStyle
  • 147
  • 12

1 Answers1

-1

Try this:

    app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://localhost:3000");
    res.header("Access-Control-Allow-Headers", "*");
    next();
});
Random Guy
  • 46
  • 4
  • thank you for your response but I already tried that as mentioned in the question. – JGStyle May 21 '21 at 06:54
  • I think you need to use exactly origin. Maybe your problem is the browser bug: https://stackoverflow.com/questions/10883211/why-does-my-http-localhost-cors-origin-not-work – Random Guy May 21 '21 at 07:15