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 Not Found


请求标题


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

接受编码：gzip，deflate，sdch

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

缓存控制：最大年龄= 0

连接：keep-alive

主机：本地主机：63342

Referer ：localhost：63342 / DemoSP / index.html

User-Agent ：Mozilla / 5.0（Windows NT 6.3; WOW64）AppleWebKit / 537.36（KHTML，与Gecko一样）Chrome / 36.0.1985.125 Safari / 537.36

X-Object-Header ：123456789

我想要做的是发送带有自定义网址的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 headers在服务器环境中启用www.myWebsite.com，或者如果您可以更改www.myWebsite.com/discover/object端点，则将其设置为JSONP端点，您可以通过{{{ 1}}。

另见this answer。

Answer 2

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

JSONP，使用$ http.jsonp for AngularJs
服务端代理，避免访问不同的域
使用＆＃39; Access-Control-Allow-Origin＆＃39;头

以下是一些可以帮助您的链接：
AngulaJS jsonp
Cross Origin $http with Angular JS

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

使用AngularJS发送HTTP标头请求

3 个答案: