当前位置:  开发笔记 > 前端 > 正文

在Access-Control-Request-Headers下添加$ http标头

如何解决《在Access-Control-Request-Headers下添加$http标头》经验,为你挑选了2个好方法。

每当我尝试向我的$ http请求添加自定义请求标头时,标头都不会显示在请求中,而是来自下面的链接,Access-Control-Request-HeadersAccess-Control-Request-Headers:accept, testHeader 下面的chrome网络选项卡中的输出:

Request Headers: 
    OPTIONS /v/xyx/abc/query?q=SELECT%20duration%20FROM%20TimeTable HTTP/1.1
    Host: example.com
    Connection: keep-alive
    Access-Control-Request-Method: GET
    Origin: http://localhost
    User-Agent: XXXXXXXX Chrome XXXXXXX
    Access-Control-Request-Headers: accept, testHeader
    Accept: */*
    Referer: http://localhost/test/
    Accept-Encoding: gzip, deflate, sdch
    Accept-Language: en-US,en;q=0.8

然而,我期待的是:

Request Headers: 
    OPTIONS /v/xyx/abc/query?q=SELECT%20duration%20FROM%20TimeTable HTTP/1.1
    Host: example.com
    Connection: keep-alive
    Access-Control-Request-Method: GET
    Origin: http://localhost
    User-Agent: XXXXXXXX Chrome XXXXXXX
    Accept: application/json
    testHeader: zdhfguwe87fg8378287efijb8
    Referer: http://localhost/test/
    Accept-Encoding: gzip, deflate, sdch
    Accept-Language: en-US,en;q=0.8

如何防止这种情况发生并在Request header下显示标题?

请参阅Angularjs中我所遵循的$ http服务的配置:

//***TRIED BOTH OF THESE: 
//***TRY#1 $http.get(url, {headers:{"Accept": "application/json", "testHeader": "zdhfguwe87fg8378287efijb8"}}).then(.......
//***TRY#2
      $http({
        method: 'GET',
        url: url,
        headers: {
          "Accept": "application/json",
          "testHeader": "zdhfguwe87fg8378287efijb8"
        }
      })
      .then(
        function(){
          //success
          console.log(arguments);
        }, function(){
          //fail
          console.log(arguments);
        });

Bart Verkoei.. 6

这是预期的行为,作为CORS预检的一部分,这是一个OPTIONS请求.一旦此请求成功,浏览器将使用自定义标头触发实际的GET请求,因为服务器已接受它们.

对于CORS请求,默认情况下仅批准一组有限的标头,因此要添加其他标头(包括您的自定义标头),CORS预检请求需要向服务器请求Access-Control-Request-HeadersHTTP标头的权限.

请参阅:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests



1> Bart Verkoei..:

这是预期的行为,作为CORS预检的一部分,这是一个OPTIONS请求.一旦此请求成功,浏览器将使用自定义标头触发实际的GET请求,因为服务器已接受它们.

对于CORS请求,默认情况下仅批准一组有限的标头,因此要添加其他标头(包括您的自定义标头),CORS预检请求需要向服务器请求Access-Control-Request-HeadersHTTP标头的权限.

请参阅:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests



2> Qin Wang..:

我花了3个小时来寻找答案。基本上,这很简单,只需让愚蠢的服务器接受自定义标头即可。

我所做的就是将这些添加到.htaccess中


        Header add Access-Control-Allow-Origin "*"
        Header add Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
        Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type, x-custom-header-here"

现在,它允许server(API)使用大多数方法,无论您的自定义标头是什么还是标头都是,从任何地方接受ajax请求。

它将清除“在飞行前响应中Access-Control-Allow-Headers不允许的请求标头字段内容类型的错误消息”。

嘲笑所有这些愚蠢的规则制定者!

推荐阅读
携手相约幸福
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有