为什么我收到没有“访问控制允许来源”错误？答案

【问题标题】：Why am I getting a No 'Access-Control-Allow-Origin' error?为什么我收到没有“访问控制允许来源”错误？
【发布时间】：2022-01-24 06:42:27
【问题描述】：

Chrome authorization Headers

我相信我在后端正确配置了 cors。如果有帮助，API 托管在 Heroku 上。这是 server.js 文件：

const express = require("express");
const helmet = require("helmet");
const cors = require("cors");
const bodyParser = require("body-parser");
const productsRouter = require("./products/products-router");
const ordersRouter = require("./orders/orders-router");
const emailsRouter = require("./emails/emails-router");

const corsOptions = {
  origin: "*",
  credentials: true,
  optionSuccessStatus: 200,
};
const server = express();
server.use(express.json());
server.use(helmet());
server.use(cors(corsOptions));

server.use("/api/products", productsRouter);
server.use("/api/orders", ordersRouter);
server.use("/api/emails", emailsRouter);

server.use((err, req, res, next) => {
  res.status(err.status || 500).json({
    message: err.message,
  });I
});

module.exports = server;

当我的前端尝试向后端发出 HTTP 请求时，我收到一个 cors 错误。内容如下：

访问 XMLHttpRequest 在 'https://nanasoapsbackend.herokuapp.com/api/products/categories' 来自来源 'http://localhost:3000' 已被 CORS 策略阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。

是的，我的后端和前端位于不同的域中。这只是突然发生的，过去几个月它工作正常，没有任何cors错误，然后突然停止工作。任何帮助将不胜感激。

【问题讨论】：

这里的错误似乎是自我描述的。您还可以在 chrome 网络选项卡中验证返回的标头。
你添加授权了吗？你更新浏览器了吗？
我添加了我的授权标头的图像。不知道该怎么做。我确实更新了我的浏览器。添加授权是什么意思？
真的是 CORS 问题吗？你检查后端是否有错误？最近我遇到了这种情况。目前，控制台似乎因 CORS 错误而误导，但实际上它是不同的。你可以你的api，如果有任何错误。
我不这么认为.. 我为后端编写了大量测试，它们都通过了。但我会尝试手动检查它。

标签： javascript node.js reactjs api cors

【解决方案1】：

问题是：您不能拥有带有允许凭据的 origin *（允许一切）。见：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials

您必须设置一个白名单（允许的域列表）

const whitelist = ['http://www.example.com', 'http://www.otherexample.com']
const corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.includes(origin)) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed'))
    }
  }
}

然后在您的客户端（前端）确保在您的 http 代理（axios、superagent、fetc 等）上使用 withCredientals 标志

【讨论】：