请求标题字段Access-Control-Allow-Headers在预检响应中本身不允许

我遇到过多次CORS问题,通常可以解决这个问题,但是我想通过从一个MEAN栈范例中看到这个问题来真正理解它。

之前,我只是在我的快递服务器中添加中间件来捕捉这些东西,但是看起来好像有某种事先挂出了我的请求。

访问控制 – 允许标题字段在预检响应中不被访问控制允许标题所允许

我认为我可以这样做:

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") }) 

仍然没有运气。

当您开始使用自定义请求标题时,您将获得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更详细地解释了这个设置。;

这是你需要添加,使其工作。

  response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); 

浏览器发送一个预检请求(使用方法typesOPTIONS)来检查服务器上托pipe的服务是否允许从不同域的浏览器访问。 为了响应preflight请求,如果你注入了上面的头文件,浏览器就会明白可以进行进一步的调用,并且我会得到一个有效的响应给我的实际的GET / POST调用。 您可以通过使用Access-Control-Allow-Origin“,”localhost,xvz.com“来代替*。(*将授予对所有域的访问权限)

这个问题解决了

  "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 is not allowed by itself in preflight response错误中都Access-Control-Allow-Headers is not allowed by itself in preflight response你可以看到chrome开发者工具有什么问题:
在这里输入图像描述

上面的错误是缺lessContent-Type因此将stringContent-Type添加到Access-Control-Allow-Headers

被接受的答案是可以的,但是很难理解。 我会在上面添加一个简单的例子。

我没有尝试自定义标题,但我玩标准的。 所以在我的ajax请求中,我添加了一个标准的头文件 – 授权与承载值+令牌。

  $$(document).on('ajaxStart', function(e){ var sb_token = localStorage.getItem(SB_TOKEN_MOBILE); if( sb_token ) { var xhr = e.detail.xhr; xhr.setRequestHeader('**Authorization**', 'Bearer ' + sb_token); } 

而我的错误是完全一样的。 我在我的nodejs服务器上所做的就是在允许的头文件中添加授权:

 res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,**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头。

我只是自己遇到这个问题,在ASP.NET的上下文中确保你的Web.config看起来像这样:

  <system.webServer> <modules> <remove name="FormsAuthentication" /> </modules> <handlers> <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> <!--<remove name="OPTIONSVerbHandler"/>--> <remove name="TRACEVerbHandler" /> <!-- <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> --> </handlers> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> </customHeaders> </httpProtocol> 

注意Access-Control-Allow-Headers键的授权值。 我错过了授权值,这个configuration解决了我的问题。

在Chrome中:

预检响应中的请求标头字段X-Requested-With不被Access-Control-Allow-Headers所允许。

对我来说,这个错误是由这个调用的URL中的尾部空格触发的。

 jQuery.getJSON( url, function( response, status, xhr ) { ... } 

只要补充一点,你可以把这些头文件也放到Webpackconfiguration文件中。 当我运行webpack dev服务器时,我需要它们。

 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" }, 

非常好,我在一个silex项目上使用这个

 $app->after(function (Request $request, Response $response) { $response->headers->set('Access-Control-Allow-Origin', '*'); $response->headers->set("Access-Control-Allow-Credentials", "true"); $response->headers->set("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); $response->headers->set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization"); }); 

同样的问题,我正面临着。

我做了一个简单的改变。

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