使用 AngularJS 发送 HTTP 标头请求
Posted
技术标签:
【中文标题】使用 AngularJS 发送 HTTP 标头请求【英文标题】:Send HTTP Header Requests with AngularJS 【发布时间】:2014-09-25 18:00:48 【问题描述】:我正在尝试向远程服务器发送 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:localhost: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
我需要这方面的帮助。谢谢
【问题讨论】:
【参考方案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;
【讨论】:
【参考方案2】:你应该像这样配置get
:
$http.get("www.myWebsite.com/discover/object",
headers:
"X-Object-Header" : "123456789",
"Content-Type": "application/json"
).success(...);
但是您会遇到 CORS 问题,因为请求的域与当前脚本所在的域不同。您需要启用www.myWebsite.com
以通过Access-Control-Allow-Origin headers 在您的服务器环境中进行查询,或者如果您可以更改www.myWebsite.com/discover/object
端点,则将其设置为可以通过$http.jsonp
查询的JSONP 端点。
另见this answer。
【讨论】:
感谢 Artjom B. 的评论。首先当我把url从www.myWebsite.com/discover/object
改成https://www.myWebsite.com/discover/object
的时候,解决了我前面提到的一些问题,但是the status code is still 404
。我使用您的代码尝试查看它是否有效,但仍然无效。我还想将根 url 与路径分开,因为我计划在对服务器的请求中有多个路径。这就是为什么我不想在请求的 url 部分中包含完整的 URL。
当您尝试执行请求时,开发人员工具控制台会打印什么?如果它显示一个安全错误,那么您需要在交付您的 Angular 应用程序的应用程序服务器中设置Access-Control-Allow-Origin headers。您确定请求发送到正确的 object 吗?
这是控制台显示的内容。 XMLHttpRequest cannot load https://www.myWebsite.com/discover/object. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
那我怎么设置Access-Control-Allow-origin headers
只是一个可以在服务器上设置的header。如果你使用 php,你可以使用header
。如果您使用的是 apache,那么 mod_headers
可能是要走的路。如果您无法在服务器中更改此设置,则必须在 www.myWebsite.com/discover/object
中实现 JSONP 端点。【参考方案3】:
您实际上在做的是跨域 Ajax 调用。您可以选择一些典型的解决方案:
JSONP,AngularJs 使用 $http.jsonp
服务端代理,避免访问不同的域
使用“Access-Control-Allow-Origin”标头
这里有一些可以帮助你的链接:
AngulaJS jsonp
Cross Origin $http with Angular JS
【讨论】:
以上是关于使用 AngularJS 发送 HTTP 标头请求的主要内容,如果未能解决你的问题,请参考以下文章
Spring MVC 4 AngularJS 1.3 HTTP POST 具有空 CSRF 令牌或标头