我曾多次遇到CORS问题，通常可以解决它，但我想通过从MEAN堆栈范式中看到这一点来真正理解。
之前我只是在我的快速服务器中添加了中间件来捕获这些东西，但它看起来像有某种预挂钩，使我的请求出错。
在preflight响应中，Access-Control-Allow-Headers不允许请求报头字段Access-Control-Allow-Headers
我假设我可以这样做:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Headers","*")
})
或者等价的，但这似乎不能解决问题。我当然也试过
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Headers","Access-Control-Allow-Headers")
})
还是不走运。
当前回答
再补充一点，你也可以把这些头文件放到Webpack配置文件中。我需要他们在我的情况下，因为我正在运行webpack开发服务器。
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
}
},
其他回答
是的，在集成angular应用程序时，我也面临着这个问题。
写这篇文章。
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Headers",
"Origin,X-Requested-With, Content-Type, Accept, Authorization"
);
res.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,PUT,DELETE,OPTIONS");
next();
});
跟我来谢谢
再补充一点，你也可以把这些头文件放到Webpack配置文件中。我需要他们在我的情况下，因为我正在运行webpack开发服务器。
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
}
},
当你开始玩自定义请求头，你会得到一个CORS预飞行。这是一个使用HTTP OPTIONS谓词并包含几个头的请求，其中一个是Access-Control-Request-Headers，列出了客户端想要包含在请求中的头。
您需要用适当的CORS报头回复CORS预飞行，以使此工作正常进行。其中之一就是Access-Control-Allow-Headers。该头需要包含与Access-Control-Request-Headers头包含的值相同(或更多)的值。
https://fetch.spec.whatwg.org/#http-cors-protocol将更详细地解释这个设置。
如果你正在配置AWS API网关(例如，它正在从React AWS Amplify应用程序发送请求)，解决方案是附加字符串
Access-Control-Allow-Methods、Access-Control-Allow-Headers Access-Control-Allow-Origin
在启用CORS对话框fpr给定端点&方法中的Access-Control-Allow-Headers字段:
.．.然后部署API:
res.setHeader(‘Access-Control-Allow-Headers’,‘*’);
