请求标题字段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']; });
