使用AngularJS發送HTTP標頭請求

Question

我正在嘗試將HTTP GET請求發送到遠程服務器，並在HTML頁面上使用響應。 以下是project / js / script.js頁面

    var app = angular.module('app', ['ngResource']);

    var config = {
        url:"www.myWebsite.com/discover",
        headers:  {
            "X-Object-Header" : "123456789 ",
            "Content-Type": "application/json"
        }
    };
    app.controller('discoverObjectCtrl', ['$scope', '$http', function (scope, http) {
        console.log('Everything Works!');

    http.get("/object", config).success(function (data) {
        scope.object = data;

    });
    console.log(scope.object);
}]);

在我的響應標題中，這就是我得到的

遠程地址 ：127.0.0.1：63342

請求網址 ：localhost：63342 / object

請求方法 ：GET

狀態碼 ：404找不到

---

請求標題

---

接受 ：application / json，text / plain， /

接受編碼 ：gzip，deflate，sdch

接受語言 ：en-US，en; q = 0.8

緩存控制 ：max-age = 0

連接方式 ：保持活動

主機 ：localhost：63342

的Referer：本地主機：63342 / DemoSP / index.html的

用戶代理 ：Mozilla / 5.0（Windows NT 6.3; WOW64）AppleWebKit / 537.36（KHTML，like Gecko）Chrome / 36.0.1985.125 Safari / 537.36

X-Object-Header ：123456789

我想做的是發送帶有自定義URL的http請求。 例如，我希望控制台標題顯示

要求網址 ：www.myWebsite.com/discover/object

並不是

要求網址 ：localhost：63342 / project / www.myWebsite.com / discover / object

請對此我需要幫助。 謝謝

Answer 1

您應該這樣配置get ：

$http.get("www.myWebsite.com/discover/object", {
    headers: {
        "X-Object-Header" : "123456789",
        "Content-Type": "application/json"
    }
}).success(...);

但是您會遇到CORS問題，因為請求的域與當前腳本所在的域不同。 您可能需要啟用通過Access-Control-Allow-Origin標頭在服務器環境中查詢www.myWebsite.com ，或者如果您可以更改www.myWebsite.com/discover/object端點，然后將其www.myWebsite.com/discover/object JSONP端點您可以通過$http.jsonp查詢。

另請參閱此答案 。

Answer 2

您實際上正在做的是跨域Ajax調用。 您可以選擇一些典型的解決方案：

• JSONP ，將$ http.jsonp用於AngularJs
• 服務端代理，避免訪問其他域

• 使用“ Access-Control-Allow-Origin”標頭

  以下是一些可以幫助您的鏈接：

• AngulaJS jsonp

• 使用Angular JS跨源$ http

Answer 3

HttpIntercepter可以用於添加公共標頭和公共參數。

將此添加到您的配置中：

$httpProvider.interceptors.push('UtimfHttpIntercepter');

並創建名稱為UtimfHttpIntercepter工廠

    angular.module('utimf.services', ['ngResource', 'ng.deviceDetector'])
    .factory('UtimfHttpIntercepter', UtimfHttpIntercepter)

    UtimfHttpIntercepter.$inject = ['$q', '$cookieStore', '$location', '$timeout', '$rootScope',  'appConfig', 'Encrypt', 'appText', 'myDevice'];
    function UtimfHttpIntercepter($q, $cookieStore, $location, $timeout, $rootScope, appConfig, Encrypt, appText, myDevice) {
    var authFactory = {};

    var _request = function (config) {
        config.headers = config.headers || {}; // change/add hearders
        config.data = config.data || {}; // change/add post data
        config.params = config.params || {}; //change/add querystring params            

        return config || $q.when(config);
    }

    var _requestError = function (rejection) {
        // handle if there is a request error
        return $q.reject(rejection);
    }

    var _response = function(response){
        // handle your response
        return response || $q.when(response);
    }

    var _responseError = function (rejection) {
        // handle if there is a request error
        return $q.reject(rejection);
    }

    authFactory.request = _request;
    authFactory.requestError = _requestError;
    authFactory.response = _response;
    authFactory.responseError = _responseError;
    return authFactory;
}