我曾多次遇到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");

其他回答

当你开始玩自定义请求头,你会得到一个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将更详细地解释这个设置。

在尝试连接Django后端时,我也遇到了类似的问题:

在preflight响应中Access-Control-Allow-Headers不允许请求报头字段授权

经过几个小时的搜索,我终于在以下评论的帮助下解决了这个问题:

还要确保你拼写的授权是美式的,而不是英式的。那是我生命中的半小时,我不会再回来了。Thx美国!(叹息)

因此,给那些被卡住的人一个提示:检查一下你是否正确拼写了“Authorization”这个单词。如果你设置Access-Control-Allow-Headers = [" authorization "],你就允许了错误的头!

我也面临着同样的问题。

我做了一个简单的改变。

  <modulename>.config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

再补充一点,你也可以把这些头文件放到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"
    }
},

我刚刚添加了response。headers;后

http.Response response = await http.get(
        Uri.parse(
          api + "api/users/all",
        ),
      );

CORS设置在后端(Django)作为官方文档, Djnago-cors-headers