在http get request angularjs中添加自定義標頭。

Question

這是我的angularjs請求。

var req = {
                method: 'GET',
                url: 'http://localhost:8080/test',
                headers: {
                    "x-auth-token" : user.token
                }
            }

            $http(req).success(function(){
                console.log("yes you have done it");
            }).error(function(){
                console.log("oopsss");
            });

當我調用此請求時，出現了此異常。

XMLHttpRequest無法加載http：// localhost：8080 / test 。 無效的HTTP狀態代碼403

但是，在谷歌瀏覽器的郵遞員測試中，它運行良好，並按預期返回了響應。 我得到這個。

郵遞員測試中的請求標頭

GET /appraisal HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Cache-Control: no-cache
x-auth-token: 123456
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36
Accept: */*
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6

並在響應頭中。

Access-Control-Allow-Origin:*
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Type:application/json;charset=UTF-8
Date:Fri, 27 Mar 2015 16:13:46 GMT
Expires:0
Pragma:no-cache
Server:Apache-Coyote/1.1
Transfer-Encoding:chunked
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

但是，當我調用我的get請求時，瀏覽器會顯示這樣的http請求標頭。

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Access-Control-Request-Headers:accept, x-auth-token
Access-Control-Request-Method:GET
Connection:keep-alive
Host:52.11.111.128:8080
Origin:http://localhost:8080
Referer:http://localhost:8080/james/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36

和http響應頭是

Access-Control-Allow-Headers:x-auth-token
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Methods:GET, POST, PUT, DELETE
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1
Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Length:0
Date:Fri, 27 Mar 2015 17:03:16 GMT
Expires:0
Pragma:no-cache
Server:Apache-Coyote/1.1
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

我的服務器中啟用了跨請求起源策略。

如何正確請求標頭？

如何在控制器中解決此問題。

請指導我。

提前致謝。

Answer 1

我們使用一種服務，該服務針對REST-API設置所有請求的標頭。 該服務設置了授權標頭，如下所示：

app.factory('api', function($http) {
    function init(token) {
        $http.defaults.headers.common.Authorization = token || 'Basic xyztoken==';
    }
    return {
        init : init
    };
});

在我們的app.run上，我們初始化標題：

app.run(function(api, …) {
    …
    api.init();
    …
});

在AuthService上，我們使用新令牌設置授權標頭：

app.factory('AuthService', function(api, …) {
    …
    // some login action with a response from the REST-API and 
    // set the new authorization header
    api.init('Bearer ' + response.data.accessToken);
    // some more stuff
    …
});

在我們的控制器中，您無需再使用自定義標頭。

僅當您使用憑據時才有效。 因此，您必須在應用程序的配置階段設置withCredential標志：

app.config(function($httpProvider, …) {
    …
    $httpProvider.defaults.withCredentials = true;
    …
});

喬·拉爾夫