请求报头字段Access-Control-Allow-Headers本身在preflight响应中不被允许

小开

最佳答案

当你开始玩自定义请求头，你会得到一个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");

浏览器发送一个preflight请求(方法类型为OPTIONS)，以检查服务器上托管的服务是否允许从不同域中的浏览器访问。在响应飞行前的请求，如果你注入上面的头浏览器理解，它是可以进一步调用，我将得到一个有效的响应我的实际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();
});

更新:

每次error: Access-Control-Allow-Headers is not allowed by itself in preflight response error时，您都可以看到Chrome开发工具:
有什么错误

< / p >

上述错误缺少Content-Type，因此将字符串Content-Type添加到Access-Control-Allow-Headers

小开

加上其他的答案。我也有同样的问题，这是我在我的快速服务器中使用的代码，以允许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服务器使用此修复。最后，我用一个简单的代理服务器解决了这个问题。

小开

公认的答案是可以的，但我很难理解它。这里有一个简单的例子来说明。

在我的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**');

小开

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

小开

我自己刚刚在ASP上下文中遇到了这个问题。NET确保您的Web。配置如下所示:

  <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键的Authorization值。我错过了授权值，这个配置解决了我的问题。

小开

铬:

请求头字段X-Requested-With不被允许在preflight响应中Access-Control-Allow-Headers

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

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

小开

非常好，我在一个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'];
});

小开

当我们为请求定制报头时，会出现这个问题。此请求使用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");

小开

res.setHeader(‘Access-Control-Allow-Headers’,‘*’);

小开

我收到了错误的OP声明使用Django, React和Django -cor -headers库。要用这个堆栈修复它，请执行以下操作:

在settings.py中，根据官方文档. py添加以下内容

from corsheaders.defaults import default_headers


CORS_ALLOW_HEADERS = default_headers + (
'YOUR_HEADER_NAME',
)

小开

消息清楚地表明API中不允许“授权”。设置< br > Access-Control-Allow-Headers: "Content-Type, Authorization"

小开

我在Angular 6中也遇到了同样的问题。我通过使用下面的代码解决了这个问题。在组件中添加代码。ts文件。

import { HttpHeaders } from '@angular/common/http';


headers;


constructor() {
this.headers = new HttpHeaders();
this.headers.append('Access-Control-Allow-Headers', 'Authorization');
}


getData() {
this.http.get(url,this.headers). subscribe (res => {
// your code here...
})}

小开

在花了差不多一天的时间后，我才发现添加下面两个代码解决了我的问题。

将此添加到Global.asax中

protected void Application_BeginRequest()
{
if (Request.HttpMethod == "OPTIONS")
{
Response.StatusCode = (int)System.Net.HttpStatusCode.OK;
Response.End();
}
}

并在web配置中添加以下内容

<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
</customHeaders>
</httpProtocol>

小开

在Post API调用中，我们在请求体中发送数据。因此，如果我们将通过向API调用添加任何额外的头来发送数据。然后第一个OPTIONS API调用会发生，然后post调用会发生。因此，您必须首先处理OPTION API调用。

你可以通过编写一个过滤器来处理这个问题，在里面你必须检查选项调用API调用并返回一个200 OK状态。下面是示例代码:

package com.web.filter;


import java.io.IOException;


import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


import org.apache.catalina.connector.Response;


public class CustomFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest httpRequest = (HttpServletRequest) req;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
if (httpRequest.getMethod().equalsIgnoreCase("OPTIONS")) {
response.setStatus(Response.SC_OK);
}
chain.doFilter(req, res);
}


public void init(FilterConfig filterConfig) {
// TODO
}


public void destroy() {
// Todo
}


}

小开

如果您试图在请求标头上添加自定义标头，则必须让服务器知道允许发生特定的标头。在过滤请求的类中执行此操作。在下面的例子中，自定义头名称为"type":

public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin",  request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH,OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me, Authorization, type ");
response.setHeader("Access-Control-Expose-Headers","Authorization");
}
}

小开

const express = require('express')
const cors = require('cors')
const app = express()


app.get('/with-cors', cors(), (req, res, next) => {
res.json({ msg: 'WHOAH with CORS it works! 🔝 🎉' })
})

在get函数中添加cors是为我工作的

小开

将这些头添加到ajax或js函数中

headers: {
"Cache-Control": null,
"X-Requested-With": null,
}

小开

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

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

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

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

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

小开

是的，在集成angular应用程序时，我也面临着这个问题。

写这篇文章。

app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Headers",
"Origin,X-Requested-With, Content-Type, Accept, Authorization"
);
res.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,PUT,DELETE,OPTIONS");
next();
});

跟我来谢谢

小开

确保你从客户端需要的所有头信息都传递给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");

小开

我只是在后面添加了response.headers;

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

后台(Django)的CORS设置作为官方文档， Djnago-cors-headers < / p >

小开

如果你正在配置AWS API网关(例如，它正在从React AWS Amplify应用程序发送请求)，解决方案是附加字符串

Access-Control-Allow-Methods,Access-Control-Allow-Headers,Access-Control-Allow-Origin

到Access-Control-Allow-Headers字段在Enable CORS对话框fpr给定的端点&方法:

.．.然后部署API:

小开

在接下来的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)


})