angularjs - $http header 添加到 Access-Control-Request-Headers 下

Question

每当我尝试将自定义请求 header 添加到我的 $http 请求时， header 不会显示在请求中，而是位于 Access-Control-Request-Headers 下，如 Access-控制请求 header :接受，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

如何防止这种情况发生并在请求 header 下显示 header ？

请参阅config我所关注的 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);
        });

Answer 1

这是 CORS 预检的预期行为，它是一个 OPTIONS 请求。一旦此请求成功，浏览器将使用自定义 header 触发实际的 GET 请求，因为服务器接受了它们。

默认情况下，CORS 请求仅批准有限的 header 集，因此要添加其他 header (包括您的自定义 header )，CORS 预检请求需要使用 Access-Control-Request-Headers 向服务器请求许可。 HTTP header 。

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