我曾多次遇到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 6中也遇到了同样的问题。我通过使用下面的代码解决了这个问题。在组件中添加代码。ts文件。
import { HttpHeaders } from '@angular/common/http';
headers;
constructor() {
this.headers = new HttpHeaders();
this.headers.append('Access-Control-Allow-Headers', 'Authorization');
}
getData() {
this.http.get(url,this.headers). subscribe (res => {
// your code here...
})}
将这些头添加到ajax或js函数中
headers: {
"Cache-Control": null,
"X-Requested-With": null,
}
是的，在集成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();
});
跟我来谢谢
在尝试连接Django后端时，我也遇到了类似的问题:
在preflight响应中Access-Control-Allow-Headers不允许请求报头字段授权
经过几个小时的搜索，我终于在以下评论的帮助下解决了这个问题:
还要确保你拼写的授权是美式的，而不是英式的。那是我生命中的半小时，我不会再回来了。Thx美国!(叹息)
因此，给那些被卡住的人一个提示:检查一下你是否正确拼写了“Authorization”这个单词。如果你设置Access-Control-Allow-Headers = [" authorization "]，你就允许了错误的头!
铬:
请求头字段X-Requested-With不被允许 预飞行响应中的Access-Control-Allow-Headers。
对我来说，此错误是由此调用的URL中的尾随空格触发的。
jQuery.getJSON( url, function( response, status, xhr ) {
...
}
