Cross-Origin Request Blocked in any browser eventhough supported - rest

Question

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:
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.

Answer 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();
});