添加自定義頭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?