[英]Send HTTP Header Requests with AngularJS
I am trying to send a HTTP GET request to a remote server and use the response on an HTML page. 我正在尝试将HTTP GET请求发送到远程服务器,并在HTML页面上使用响应。 Below is the project/js/script.js page 以下是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);
}]);
In my response header, this is what I get 在我的响应标题中,这就是我得到的
Remote Address :127.0.0.1:63342 远程地址 :127.0.0.1:63342
Request URL :localhost:63342/object 请求网址 :localhost:63342 / object
Request Method :GET 请求方法 :GET
Status Code :404 Not Found 状态码 :404找不到
Request Headers 请求标题
Accept :application/json, text/plain, / 接受 :application / json,text / plain, /
Accept-Encoding : gzip,deflate,sdch 接受编码 :gzip,deflate,sdch
Accept-Language :en-US,en;q=0.8 接受语言 :en-US,en; q = 0.8
Cache-Control :max-age=0 缓存控制 :max-age = 0
Connection :keep-alive 连接方式 :保持活动
Host :localhost:63342 主机 :localhost:63342
Referer : localhost:63342/DemoSP/index.html 的Referer:本地主机:63342 / DemoSP / index.html的
User-Agent :Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36 用户代理 :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 X-Object-Header :123456789
What I would like to do is send the http request with a customized URL. 我想做的是发送带有自定义URL的http请求。 So for instance I would like my console Header to display 例如,我希望控制台标题显示
Request URL :www.myWebsite.com/discover/object 要求网址 :www.myWebsite.com/discover/object
And not 并不是
Request URL :localhost:63342/project/www.myWebsite.com/discover/object 要求网址 :localhost:63342 / project / www.myWebsite.com / discover / object
Please I need Help on this. 请对此我需要帮助。 Thanks 谢谢
You should configure the get
like this: 您应该这样配置get
:
$http.get("www.myWebsite.com/discover/object", {
headers: {
"X-Object-Header" : "123456789",
"Content-Type": "application/json"
}
}).success(...);
But you will run into CORS issues since the requested domain is not the same as the one where the current script is housed. 但是您会遇到CORS问题,因为请求的域与当前脚本所在的域不同。 You would either need to enable www.myWebsite.com
to be queried in your server environment through the Access-Control-Allow-Origin headers or if you can change the www.myWebsite.com/discover/object
endpoint then make it a JSONP endpoint which you can query through $http.jsonp
. 您可能需要启用通过Access-Control-Allow-Origin标头在服务器环境中查询www.myWebsite.com
,或者如果您可以更改www.myWebsite.com/discover/object
端点,然后将其www.myWebsite.com/discover/object
JSONP端点您可以通过$http.jsonp
查询。
See also this answer . 另请参阅此答案 。
What you are actually doing is cross domain Ajax call. 您实际上正在做的是跨域Ajax调用。 There are some typical solutions you can choose: 您可以选择一些典型的解决方案:
Use 'Access-Control-Allow-Origin' header 使用“ Access-Control-Allow-Origin”标头
Here are some links which can help you: 以下是一些可以帮助您的链接:
HttpIntercepter can be used for adding common headers as well as common parameters. HttpIntercepter可以用于添加公共标头和公共参数。
Add this in your config : 将此添加到您的配置中:
$httpProvider.interceptors.push('UtimfHttpIntercepter');
and create factory with name 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.