javascript - 无法在 angularJS 中为 $http.get 添加自定义 header

Question

所以，我正在执行此请求:

$http({
    method: 'GET',
    url: query,
    headers: { 'api-key': 'test-api-key' }
});

在 Chrome 开发者工具“网络”选项卡中，我可以看到正在发送的请求:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,sv;q=0.6
Access-Control-Request-Headers:accept, api-key
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:my-host.myhost.net
Origin:http://localhost:24153
Pragma:no-cache
Referer:http://localhost:24153/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36
X-FirePHP-Version:0.0.6

问:可能有哪些原因导致请求头未添加到请求中？

Answer 1

您正在使用自定义 header 发出跨源 Ajax 请求。

这使得它成为一个复杂的请求，因此浏览器必须发送 a pre-flight OPTIONS request获得发出跨源 Ajax 请求的权限。

如果服务器正确响应 OPTIONS 请求，浏览器将发出带有您想要的附加 header 的 GET 请求。