请求已被 CORS 策略阻止请求 header 字段访问令牌在预检响应节点中被 Access-Control-Allow-Headers 不允许

Question

I've build a MERN stack web app and trying to deploy it's frontend on netlify and backend on heroku. I've deployed both of them successfully but getting issues in sending requests to api from my frontend.

I'm getting this on console -

Access to XMLHttpRequest at 'https://covidsupportweb.herokuapp.com/api/donate/adminPaginate' from origin 'https://angry-hamilton-41dfa7.netlify.app' has been blocked by CORS policy: Request header field access-token is not allowed by Access-Control-Allow-Headers in preflight response.

xhr.js:177 POST https://covidsupportweb.herokuapp.com/api/donate/adminPaginate net::ERR_FAILED

I tried to fix this and added following lines in my server.js file -

// cors middleware
app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization",
  );
  res.header(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE",
  );
  next();
});

Please help me fix this, I really need to start this website as soon as possible

frontend - https://angry-hamilton-41dfa7.netlify.app backend - https://covidsupportweb.herokuapp.com

Answer 1

You have to add options also in allowed headers. browser sends a preflight request before original request is sent. See below

res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS'); From source https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

In CORS, a preflight request with the OPTIONS method is sent, so that the server can respond whether it is acceptable to send the request with these parameters. The Access-Control-Request-Method header notifies the server as part of a preflight request that when the actual request is sent, it will be sent with a POST request method. The Access-Control-Request-Headers header notifies the server that when the actual request is sent, it will be sent with a X-PINGOTHER and Content-Type custom headers. The server now has an opportunity to determine whether it wishes to accept a request under these circumstances.

Alternate (Recomended): You can avoid this manual configuration by using npmjs.com/package/cors npm package.I have used this method also, it is clear and easy.

How to use (2nd method):

1. Install CORS using CMD or Terminal: $ npm install cors

2. Make change in your code according to this:

var express = require('express')
var cors = require('cors')
var app = express()
 
app.use(cors())
 
app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})
 
app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})