我曾多次遇到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")
})
还是不走运。
当前回答
确保你从客户端需要的所有头信息都传递给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"
}
},
公认的答案是可以的，但我很难理解它。这里有一个简单的例子来说明。
在我的ajax请求我有一个标准的授权头。
$$(document).on('ajaxStart', function(e){
var auth_token = localStorage.getItem(SB_TOKEN_MOBILE);
if( auth_token ) {
var xhr = e.detail.xhr;
xhr.setRequestHeader('**Authorization**', 'Bearer ' + auth_token);
}
这段代码产生了问题中的错误。我必须在我的nodejs服务器中添加授权头:
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,**Authorization**');
在接下来的js我的问题得到解决使用
const cors=micro_cors({
origin:"https://studio.apollographql.com",
allowMethods:['POST','GET','PUT','PATCH','DELETE','OPTIONS'],
allowCredentials:true,
allowHeaders:['X-Requested-With','X-HTTP-Method-Override','Content-Type','Authorization','Accept','Access-Control-Allow-Credentials','Access-Control-Allow-Origin' ]
})
然后把它吸进去
export default cors(async function handler(req, res) {
await serverStart
if(req.method==="OPTIONS"){
res.end()
return false
}
apolloserver.createHandler({path:"/api/graphql"})(req,res)
})
当我们为请求定制报头时，会出现这个问题。此请求使用HTTP OPTIONS并包含几个头。
此请求所需的头是Access-Control-Request-Headers，它应该是响应头的一部分，并且应该允许来自所有源的请求。有时在响应头中也需要Content-Type。所以你的响应头应该是这样的
response.header("Access-Control-Allow-Origin", "*"); // allow request from all origin
response.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization");
加上其他的答案。我也有同样的问题，这是我在我的快速服务器中使用的代码，以允许REST调用:
app.all('*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', 'URLs to trust of allow');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
if ('OPTIONS' == req.method) {
res.sendStatus(200);
} else {
next();
}
});
这段代码所做的基本上是拦截所有请求并添加CORS报头，然后继续我的正常路由。当有OPTIONS请求时，它只响应CORS报头。
编辑:我在同一台机器上对两个独立的nodejs express服务器使用此修复。最后，我用一个简单的代理服务器解决了这个问题。
