Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js CORS策略已阻止请求请求标头字段访问令牌飞行前响应节点中的访问控制允许标头不允许访问令牌_Node.js_Reactjs_Cors_Mern - Fatal编程技术网

Node.js CORS策略已阻止请求请求标头字段访问令牌飞行前响应节点中的访问控制允许标头不允许访问令牌

Node.js CORS策略已阻止请求请求标头字段访问令牌飞行前响应节点中的访问控制允许标头不允许访问令牌,node.js,reactjs,cors,mern,Node.js,Reactjs,Cors,Mern,我已经构建了一个MERN stack web应用程序,并尝试将其前端部署在netlify上,后端部署在heroku上。我已经成功地部署了它们,但在从前端向api发送请求时遇到了问题 我把这个放在控制台上- Access to XMLHttpRequest at 'https://covidsupportweb.herokuapp.com/api/donate/adminPaginate' from origin 'https://angry-hamilton-41dfa7.netlify.app

我已经构建了一个MERN stack web应用程序,并尝试将其前端部署在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();
});
请帮我解决这个问题,我真的需要尽快启动这个网站

前端-
后端-

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

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

在CORS中,使用OPTIONS方法发送飞行前请求,以便服务器能够响应是否可以使用这些参数发送请求。Access Control Request Method标头作为飞行前请求的一部分通知服务器,当发送实际请求时,它将使用POST请求方法发送。Access Control Request Headers标头通知服务器,在发送实际请求时,将使用X-PINGOTHER和内容类型自定义标头发送该请求。服务器现在有机会确定在这些情况下是否希望接受请求

备选(建议): 您可以使用
npmjs.com/package/cors
npm-package来避免这种手动配置。我也使用过这种方法,它清晰而简单

如何使用(第二种方法):

  • 使用CMD或终端安装CORS:
    $npm安装cors

  • 根据以下内容更改代码:


  • 当您请求
    https://covidsupportweb.herokuapp.com/api/users/isauth
    请求标题中有一个
    访问令牌
    键,其值未定义,这正常吗?它不应该未定义我访问了你的网站,当我到达登录页时,有一个未定义的。在哪里可以看到这个标题?只需使用
    .cors()
    中间件即可。如果需要将本地前端连接到远程后端,请使用
    “访问控制允许标头/方法”、“*”
    。但别忘了它对生产不安全。我没有检查标题,我添加了这个-
    res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,PATCH,OPTIONS')仍然出现错误:(使用第二种方法尝试第二种方法,我认为它有效,因为我在控制台上没有收到任何错误。但另一个问题出现了:(不知道为什么cookie没有存储,这就是为什么即使在登录后我也未经授权。)
    
    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')
    })