来自原点已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：“访问控制允许来源”答案

【问题标题】：From origin has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin'来自原点已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：“访问控制允许来源”
【发布时间】：2021-09-29 23:23:33
【问题描述】：

我正在尝试从我的 api (nodejs) 获取数据

reactjs

    let config = {
      headers: {
        "Authorization": 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2MjY5NDUxNTksImV4cCI6MTYyNzAzMTU1OX0.8nFEUHFoVJtXvt-yi3DYuuJIjvvqNpJtZuVopsJ3bhQ',
        "Access-Control-Allow-Credentials": true,
        "Access-Control-Allow-Origin": "http://localhost:5001"

      }
    }
    axios.get('http://school-dev-api.itec.ph/Teacher/NewUser', config)
    .then(response => {
      console.log(response)
      this.setState({posts: response.data})
    })
    .catch(error => {
      console.log(error)
    })
  }

附加信息在 api 测试器中它可以工作，但我想知道为什么在我的 reactjs 中它不起作用，

//nodejs

我的白名单

"whitelist": [
    "http://localhost",
    "http://localhost:5000",
    "http://localhost:5001/",
    "http://localhost:5001",
    "http://localhost:8080", 
    "http://school-dev-api.itec.ph",
    "chrome-extension://aejoelaoggembcahagimdiliamlcdmfm",
],

app.js (nodejs)

        var corsOptions = {
            origin: function (origin, callback) {
                console.log("origin",origin);
                if (config.whitelist.indexOf(origin) !== -1) {
                    console.log(config.whitelist.indexOf(origin))
                    callback(null, true)
                } else {
                    console.log(config.whitelist)
                    console.log("else")
                    console.log(new Error('Not allowed by CORS'))
                    callback(new Error('Not allowed by CORS'))
                }
            },
            methods: ["GET", "POST", "DELETE", "PUT"],
            allowedHeaders: ["token", "Content-Type","Authorization"],
            credentials: true
        }

这是我得到的错误

*CORS 策略已阻止从源“http://localhost:5001”访问“http://school-dev-api.itec.ph/Teacher/NewUser”处的 XMLHttpRequest：响应预检请求未通过访问控制检查：“Access-Control-Allow-Origin”标头包含多个值“http://localhost:5001,”，但只允许一个。 em>

【问题讨论】：

您的请求中不应需要 2 个访问控制标头。它们是响应标头。

标签： node.js reactjs cors

【解决方案1】：

Добавить в свой app.js：

const cors = require('cors')
app.use(cors({credentials: true, origin: process.env.PORT}));

别忘了之前运行npm i cors。结果应该是这样的：my code example

【讨论】：

【解决方案2】：

这可能是由于 API 端点不接受使用 options 方法的预检调用。使用选项方法调用向您的 api 添加成功返回，看看会发生什么。

【讨论】：