添加自定义头HTTP请求使用angular.js

Question

我是一个新手，angular.js，和我想一些头添加到一个请求：

var config = {headers: { 
      'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==', 
      'Accept': 'application/json;odata=verbose' 
     } 
    }; 

    $http.get('https://www.example.com/ApplicationData.svc/Malls(1)/Retailers', config).success(successCallback).error(errorCallback); 

我看了所有的文件，这在我看来应该是正确的。

当我使用的URL本地文件在$http.get，我在Chrome中看到网络选项卡上的以下HTTP请求：

GET /app/data/offers.json HTTP/1.1 
Host: www.example.com 
Connection: keep-alive 
Cache-Control: max-age=0 
If-None-Match: "0f0abc9026855b5938797878a03e6889" 
Authorization: Basic Y2hhZHN0b25lbWFuOkNoYW5nZV9tZQ== 
Accept: application/json;odata=verbose 
X-Requested-With: XMLHttpRequest 
If-Modified-Since: Sun, 24 Mar 2013 15:58:55 GMT 
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22 
X-Testing: Testing 
Referer: http://www.example.com/app/index.html 
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: en-US,en;q=0.8 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 

正如你所看到的，标题被正确添加。但是，当我更改URL，以上面的$http.get所示的（除了使用真实地址，而不是example.com），然后我得到：

OPTIONS /ApplicationData.svc/Malls(1) HTTP/1.1 
Host: www.datahost.net 
Connection: keep-alive 
Access-Control-Request-Method: GET 
Origin: http://mpon.site44.com 
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22 
Access-Control-Request-Headers: accept, origin, x-requested-with, authorization, x-testing 
Accept: */* 
Referer: http://mpon.site44.com/app/index.html 
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: en-US,en;q=0.8 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 

在代码中这两者之间的唯一区别是一个是第一个URL是本地文件，第二个URL是远程服务器。如果您查看第二个请求标头，则没有验证标头，并且Accept似乎使用默认值而不是指定的标头。此外，第一行现在说OPTIONS而不是GET（尽管Access-Control-Request-Method是GET）。

任何想法上述代码有什么问题，或者如何在不使用本地文件作为数据源时使用附加头文件？

Answer 1

对我来说，下面的解释片段起作用了。也许你不应该使用'作为标题名称？

{ 
    headers: { 
     Authorization: "Basic " + getAuthDigest(), 
     Accept: "text/plain" 
    } 
} 

我使用$http.ajax()，但我不希望这是一个改变游戏规则。

Answer 2

我把你有什么，又增加了X-Testing头

var config = {headers: { 
     'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==', 
     'Accept': 'application/json;odata=verbose', 
     "X-Testing" : "testing" 
    } 
}; 

$http.get("/test", config); 

以及在Chrome网络选项卡上，我看到他们被发送。

GET /test HTTP/1.1 
Host: localhost:3000 
Connection: keep-alive 
Accept: application/json;odata=verbose 
X-Requested-With: XMLHttpRequest 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22 
Authorization: Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ== 
X-Testing: testing 
Referer: http://localhost:3000/ 
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: en-US,en;q=0.8 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 

你没有从浏览器或服务器上看到它们吗？尝试使用浏览器工具或调试代理，查看发送的内容。

Answer 3

你看到的选项请求罚款。授权标头不在其中。

但为了使基本身份验证正常工作，您需要将withCredentials = true;添加到您的var config。

从AngularJS $http documentation：

withCredentials - {boolean} - 是否设置withCredentials 标志XHR对象。有关更多信息，请参阅requests with credentials。

Answer 4

服务器的答案是什么？它应该回复204，然后确实发送您请求的GET。

在OPTIONS中，客户端正在检查服务器是否允许CORS请求。如果它给你的东西与204不同，那么你应该配置你的服务器来发送正确的Allow-Origin头文件。

您添加标题的方式是正确的方法。

Answer 5

我的建议会在函数里面加上这样的函数调用设置 查看适合它的头文件。我相信它一定会奏效。它完全为我工作。

function getSettings(requestData) { 
    return { 
     url: requestData.url, 
     dataType: requestData.dataType || "json", 
     data: requestData.data || {}, 
     headers: requestData.headers || { 
      "accept": "application/json; charset=utf-8", 
      'Authorization': 'Bearer ' + requestData.token 
     }, 
     async: requestData.async || "false", 
     cache: requestData.cache || "false", 
     success: requestData.success || {}, 
     error: requestData.error || {}, 
     complete: requestData.complete || {}, 
     fail: requestData.fail || {} 
    }; 
} 

然后打电话给你的数据是这样

var requestData = { 
     url: 'API end point', 
     data: Your Request Data, 
     token: Your Token 
    }; 

    var settings = getSettings(requestData); 
    settings.method = "POST"; //("Your request type") 
    return $http(settings); 

Answer 6

如果您想您的自定义标题添加到所有的要求，你可以改变$ httpProvider默认值总是添加这个头......

app.config(['$httpProvider', function ($httpProvider) { 
    $httpProvider.defaults.headers.common = { 
     'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==', 
     'Accept': 'application/json;odata=verbose' 
     }; 
}]); 

Answer 7

使用HTTP POST方法的基本认证：

$http({ 
    method: 'POST', 
    url: '/API/authenticate', 
    data: 'username=' + username + '&password=' + password + '&email=' + email, 
    headers: { 
     "Content-Type": "application/x-www-form-urlencoded", 
     "X-Login-Ajax-call": 'true' 
    } 
}).then(function(response) { 
    if (response.data == 'ok') { 
     // success 
    } else { 
     // failed 
    } 
}); 

...和GET与头的方法调用：

$http({ 
    method: 'GET', 
    url: '/books', 
    headers: { 
     'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==', 
     'Accept': 'application/json', 
     "X-Login-Ajax-call": 'true' 
    } 
}).then(function(response) { 
    if (response.data == 'ok') { 
     // success 
    } else { 
     // failed 
    } 
}); 

Answer 8

Chrome的预检寻找CORS标头的请求。如果请求可以接受，它会发送真正的请求。如果你正在做这个跨域，你只需要处理它，或者找到一种方法来使请求非跨域。这是设计。

不同于简单的请求（上面讨论的），“预检”请求第一 由OPTIONS方法发送一个HTTP请求到资源上 其他域，以确定实际的请求是否是安全 发送。跨站点请求以这种方式进行预检，因为它们可能会对用户数据产生影响 。特别是， 预冲如果：

它使用GET，HEAD或POST以外的方法。另外，如果POST用于 发送具有除 application/x-www-form-urlencoded，multipart/form-data或text/plain之外的内容类型的请求数据，例如 。如果POST请求使用 application/xml或text/xml将XML有效载荷发送到服务器，则会预先显示该请求。它集 自定义标题的请求（例如请求使用的标题，如 X-PINGOTHER）

编号：AJAX in Chrome sending OPTIONS instead of GET/POST/PUT/DELETE?