使用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

请求URL：localhost:63342/object

请求方法：获取

状态代码：404未找到

请求头

接受：申请/json，文本/平原，/

接受编码：gzip、deflate、sdch

接受语言：en-US，en；q=0.8

缓存控制：最大年龄=0

连接：保持活力

主机：本地主机：63342

Referer:localhost:63342/DemoSP/index.html

User-Agent： Mozilla/5.0（Windows NT 6.3； WOW64）AppleWebKit/537.36（KHTML， like Gecko）Chrome/36.0.1985.125Safari /537.36

X-Object-Header:123456789

我想做的是发送带有自定义URL的超文本传输协议请求。例如，我希望我的控制台头显示

请求URL:www.myWebsite.com/discover/object

而不是

请求URL:localhost:63342/project/www.myWebsite.com/discover/object

拜托，我需要帮助。谢啦

Answer 1

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;
}

Answer 2

您实际做的是跨域Ajax调用。有一些典型的解决方案，你可以选择：

>

JSONP，对AngularJs使用$http.jsonp

服务端代理，避免访问不同的域

使用“访问控制允许来源”标题

以下是一些可以帮助您的链接：

AngulaJS jsonp

带角度JS的跨源$http

Answer 3

您应该如下配置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/objectendpoint，则将其设为JSONPendpoint，您可以通过$http.JSONP进行查询。

请参见此答案。