我曾多次遇到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")
})
还是不走运。
这个问题用
"Origin, X-Requested-With, Content-Type, Accept, Authorization"
特别是在我的项目(express.js/nodejs)
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next();
});
更新:
每次错误:Access-Control-Allow-Headers本身在preflight响应错误中是不允许的,你可以看到chrome开发工具出了什么问题:
上面的错误是缺少Content-Type,所以添加字符串Content-Type到Access-Control-Allow-Headers
确保你从客户端需要的所有头信息都传递给Access-Control-Allow-Headers,否则你会一直遇到CORS问题。在这种情况下,这将是'x-api-key',否则你会一直遇到cors问题
const options = {
method: "GET",
headers: new Headers({
"X-API-Key": "ds67GHjkshjh00ZZhhsskhjgasHJHJHJ&87",
}),
};
response.setHeader(
"Access-Control-Allow-Headers",
"X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, x-api-key");
再补充一点,你也可以把这些头文件放到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"
}
},