跨域请求在任何浏览器中被阻止，即使支持

Question

我已经阅读了很多其他 stackoverflow 问题和 github 问题，但没有一个能够解决我的问题，所以我决定打开一个新问题。

我正在使用 Nextjs（前端）和 Express+Node（后端）构建一个简短的应用程序。每次前端通过 REST 向后端发出获取/发布请求时，我都会得到

“跨域请求被阻止：同源策略不允许 读取 DOMAIN 中的远程资源。 （原因：CORS 标头 'Access-Control-Allow-Origin' 缺失）。”

为了解决这个问题，我尝试了多种方法。首先我在我的后端添加了app.use(cors())，但这没有用。我加了

const configcors = {
    origin: true,
    methods: 'GET,HEAD,POST,PUT,DELETE,CONNECT,OPTIONS,TRACE,PATCH',
    allowedHeaders: 'X-Powered-By,Content-Type,Content-Length,ETag,Date,Connection,Keep-Alive',
    exposedHeaders: 'X-Powered-By,Content-Type,Content-Length,ETag,Date,Connection,Keep-Alive',
    credentials: true
}
app.use(cors(configcors))

绝对允许一切，但这也不起作用。我尝试使用手动添加标题

app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
  });

这 - 正如你所料 - 也没有工作。 最后我想如果预检有错误，所以我尝试了

app.options('*', cors(configcors))

这也不起作用。此外，为了解决这个问题，我查看了网络选项卡，以识别标头以及是否发送了正确的标头。在 Firefox 中，Networking 选项卡中根本没有出现 Request。

铬：

在 chrome 上，我可以看到请求，但根本没有响应标头。这让我假设可能 CORS 不是问题 - 为了尝试这个，我在 chrome 中安装了 moesif CORS 扩展以允许各种 CORS。我错了：启用扩展后，每个请求都可以正常工作 - 但我不能依赖生产中的扩展。

这意味着该错误肯定与CORS有关，但我不知道我现在应该做什么。

如果有人遇到类似的问题，我会非常感谢你的建议。

Answer 1

试试这个：

    app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://localhost:3000");
    res.header("Access-Control-Allow-Headers", "*");
    next();
});