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

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

我已经构建了一个 MERN 堆栈网络应用程序，并尝试在 netlify 上部署它的前端，在 heroku 上部署它的后端。我已经成功部署了它们，但是在从我的前端向 api 发送请求时遇到问题。

我在控制台上得到这个 -

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

我试图解决这个问题并在我的 server.js 文件中添加了以下几行 -

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

请帮我解决这个问题，我真的需要尽快启动这个网站

前端 - https://angry-hamilton-41dfa7.netlify.app 后端 - https://covidsupportweb.herokuapp.com

解决方法

您还必须在允许的标题中添加选项。浏览器在发送原始请求之前发送预检请求。见下文

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

在 CORS 中，发送带有 OPTIONS 方法的预检请求，以便服务器可以响应是否可以使用这些参数发送请求。 Access-Control-Request-Method 标头作为预检请求的一部分通知服务器，当实际请求被发送时，它将使用 POST 请求方法发送。 Access-Control-Request-Headers 标头通知服务器，当实际请求发送时，它将与 X-PINGOTHER 和 Content-Type 自定义标头一起发送。在这些情况下，服务器现在有机会确定它是否希望接受请求。

替代（推荐）：您可以通过使用 npmjs.com/package/cors npm package 来避免这种手动配置。我也使用过这种方法，它清晰易懂。

如何使用（第二种方法）：

使用 CMD 或终端安装 CORS： $ npm install cors
根据以下内容更改您的代码：

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')
})