每当我尝试向我的$http请求添加自定义请求标头时,标头不会显示在请求中,而是来自Access-Control-Request-Header,如Access-Control-Request-Headers：accept,testHeader
请参阅以下chrome的网络选项卡中的输出：
请参阅以下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,en;q=0.8
如何防止这种情况发生并在Request header下显示标题？
请参阅Angularjs中我所遵循的$http服务的config：
//***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);
});
解决方法
这是预期的行为,作为CORS预检的一部分,这是一个OPTIONS请求.一旦此请求成功,浏览器将使用自定义标头触发实际的GET请求,因为服务器已接受它们.
对于CORS请求,默认情况下仅批准一组有限的标头,因此要添加其他标头(包括您的自定义标头),CORS预检请求需要向服务器请求Access-Control-Request-Headers HTTP标头的权限.
见：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests
