每当我尝试向我的$ http请求添加自定义请求标头时,标头都不会显示在请求中,而是来自下面的链接,Access-Control-Request-Headers
如Access-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-Headers
HTTP标头的权限.
请参阅:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests
这是预期的行为,作为CORS预检的一部分,这是一个OPTIONS请求.一旦此请求成功,浏览器将使用自定义标头触发实际的GET请求,因为服务器已接受它们.
对于CORS请求,默认情况下仅批准一组有限的标头,因此要添加其他标头(包括您的自定义标头),CORS预检请求需要向服务器请求Access-Control-Request-Headers
HTTP标头的权限.
请参阅:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests
我花了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不允许的请求标头字段内容类型的错误消息”。
嘲笑所有这些愚蠢的规则制定者!