Access-Control-Allow-Headers不允许请求标头字段Access-Control-Allow-Headers


224

我正在尝试使用发布请求将文件发送到服务器,但是在发送请求时会导致错误:

Access-Control-Allow-Headers不允许请求标头字段Content-Type。

所以我搜索了错误并添加了标题:

$http.post($rootScope.URL, {params: arguments}, {headers: {
    "Access-Control-Allow-Origin" : "*",
    "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}

然后我得到错误:

Access-Control-Allow-Headers不允许请求标头字段Access-Control-Allow-Origin

所以我用谷歌搜索,唯一能找到的类似问题是半答案,然后关闭主题。我应该添加/删除哪些标题?


这些标头从服务器发送到浏览器,因此浏览器可以决定是否允许JS解析响应。将它们添加到请求中没有价值。
pellyadolfo

Answers:


189

服务器(POST请求发送到的服务器Access-Control-Allow-Headers的响应中需要包含标头(等)。将它们放入客户的请求中无效。

这是因为服务器需要指定它接受跨域请求(并允许Content-Type请求标头,依此类推)–客户端无法自行决定给定服务器应允许CORS。


5
如何在后端设置标题?
user3194367 2014年

11
@ user3194367:取决于您的后端。
Felix Kling 2014年

14
我想我必须和我的服务器人员交谈。
user3194367 2014年

2
response.addHeader(“ Access-Control-Allow-Headers”,“ yourKey”);
Mayuresh '16

2
@Mayuresh yourKey是什么?Content-Type
zhuguowei

240

我有同样的问题。在jQuery文档中,我发现:

对于跨域请求,内容类型设置为比其他任何东西application/x-www-form-urlencodedmultipart/form-datatext/plain将触发浏览器发送预检OPTIONS请求到服务器。

因此,尽管服务器允许跨源请求但不允许跨源请求Access-Control-Allow-Headers,但它将引发错误。默认情况下,角度内容类型为application/json,它正在尝试发送OPTION请求。尝试覆盖有角度的默认标头或Access-Control-Allow-Headers在服务器端允许。这是一个角度样本:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

28
这应该是一个可以接受的答案,比其他答案要有用得多!
Mike Szyndel

1
我想要multipart / form-data,因为我想对一些东西加以赞扬
VladoPandžić16年

3
or allow Access-Control-Allow-Headers in server end怎么样?
奥马尔

1
@omar取决于您使用的服务器平台。如果是Java,则在其他答案上有示例(如果是php),则有一个函数名称header来设置响应的标头
Fisherman

1
最终,经过两天的研究。我没有话要谢谢你!
Mekey Salaria

51

如果这可以帮助任何人,(即使这有点差,因为我们必须只允许出于开发目的使用它)这是一个Java解决方案,因为我遇到了相同的问题。[编辑]不要使用通配符*,因为这是一个不好的解决方案,localhost如果确实需要在本地工作,请使用通配符* 。

public class SimpleCORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    chain.doFilter(req, res);
}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

正如对Access-Control-Request-Header的多个答案所证明的,由于环境不同,显然存在差异。对我有用的是获得对请求对象的访问权并转储标头的值,尤其是“ Access-Control-Request-Headers”的标头值。然后,将其复制/粘贴到您的response.setHeader(“ Access-Control-Allow-Headers”,“ {paste here}”“);中。我也在使用Java,但是我需要其他值,而在此答案中提到的一些我不需要。
软件先知

这是一年前帮助人们和分享线索的部分解决方案(如上所述)。我看不到拒绝投票的意义,但这是您的自由。这个想法是允许在服务器端头,所以当一个OPTION请求被发布时,客户端/浏览器知道允许哪些头。我承认有一些困惑,此后,我的CORS过滤器发生了很大变化。更好的做法是,Access-Control-Allow-Origin永远不应为*;在我的实现中,它是由属性设置的。
lekant '16

解决方案已经过编辑,以包括最佳实践
lekant

16

服务器(POST请求发送到的服务器)需要在其响应中包含Content-Type标头。

这是要包括的典型标头的列表,包括一个自定义“ X_ACCESS_TOKEN”标头:

"X-ACCESS_TOKEN", "Access-Control-Allow-Origin", "Authorization", "Origin", "x-requested-with", "Content-Type", "Content-Range", "Content-Disposition", "Content-Description"

这就是您的http服务器人员需要为要将请求发送到的Web服务器进行配置。

您可能还想让服务器人员公开“ Content-Length”标头。

他会将其识别为跨域资源共享(CORS)请求,并应了解进行这些服务器配置的含义。

有关详细信息,请参见:


13

您可以使用以下方法在PHP中激活适当的标头:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

4
请描述您的答案与其他答案有何不同。仅发布一些代码不是很有帮助。
oscfri

1
您是个摇滚明星,其余的答案都涉及技术方面。您也可以通过指定应允许的方法来解决我的问题!
Daniel ZA

1
@DanielZA虽然我理解您的意思是“其他答案深入到技术方面”,因为您只是想让自己的代码运行,所以SO的意思是深入研究事物的技术方面,因为您应该知道为什么事情在起作用,而不仅仅是然后如何工作。评论解决方案时不要掩饰这种行为……
nicolasassi

8

以下对我来说适用于nodejs:

xServer.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept');

  next();
});

访问控制允许方法的顺序重要吗?
vini

@vini,我认为没关系。
Ninja Coding's

4

您尝试设置的标题是响应标题。响应中,必须由您向其发出请求的服务器提供它们。

它们在客户端上没有位置。如果可以由需要许可的站点而不是拥有数据的站点来授予许可,则没有办法授予许可。


如何在后端设置标题?
user3194367 2014年

@ user3194367 —取决于您的后端。我不知道您要使用哪种HTTP服务器或编程语言。
昆汀2014年

我想我必须和我的服务器人员交谈。
user3194367 2014年

3

如果有人在Express服务器上遇到此问题,请添加以下中间件

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

3

如果您在PC或Mac上的Chrome浏览器中测试了对ionic2或angularjs 2的一些JavaScript请求,请确保为Chrome浏览器安装CORS插件以允许跨源访问。

mayba的get请求将不需要它就可以工作,但是post and puts和delete将需要您安装cors插件以进行测试,而不会出现问题,definitley并不酷,但是我不知道人们没有CORS插件怎么做。

并确保json响应不会因某些json状态返回400


3

这是后端问题。如果在后端使用Sails api更改cors.js并在此处添加您的文件

module.exports.cors = {
  allRoutes: true,
  origin: '*',
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'
};

3

Asp Net Core中,可以快速使它为开发工作;在中Startup.csConfigure method添加

app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

2

就我而言,我将@HeaderParam作为几个参数接收到Web服务方法中。

这些参数必须以这种方式在CORS过滤器中声明:

@Provider
public class CORSFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");
        ...
        headers.add("Access-Control-Allow-Headers", 
        /*
         * name of the @HeaderParam("name") must be declared here (raw String):
         */
        "name", ...);
        headers.add("Access-Control-Allow-Credentials", "true");
        headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");   
    }
}

2

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers错误表示Access-Control-Allow-Origin响应未处理或不允许HTTP标头字段。Access-Control-Allow-Origin从请求标头中删除字段。


2

如果您使用localhostPHP并将其设置为可解决此问题:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type'); 

从您的前端使用:

{headers: {"Content-Type": "application/json"}}

和繁荣不再有问题localhost

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.