I am building an Ionic app, and trying to set custom headers for every GET request I do on the app.
This is the CustomHeaderController
angular.module('myHeader',[])
.controller('headerCtrl',['customHeader',function(customHeader){
var config = {headers: {
'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
'Accept': 'text/html;odata=verbose',
"X-Request-from" : "{{vm.data.os}}" }};
$http.get('http://localhost:8100, config); }])
At the moment when I inspect the page, I do not get any custom header, just the default one.
Any clues? Appreciate it! Cheers.
You need to use interceptor in this case with every http request.
Interceptor Details
Related
I am a newbiew to ReactJs, need to know different ways by which we can include Headers in our service Url before making a call.
I am aware of how we used to make GET/POST Calls in angular Js after including headers...
Similarly want to know different ways to define headers in React Js, below is the sample of my component where i am making a service call.
There is a service Url which has few headers defined on Server side, how to include those headers on our side ...Sorry cant disclose the headers, please help me with some dummy headers data
componentDidMount(){
fetch('serviceURL')
.then(res=>res.json())
.then(items=>{
this.setState({
items : items.contactNumber
});
})
}
You can do something like this:
const request = new Request('https://example.com/some-url', {
headers: new Headers({
'Content-Type': 'text/plain'
})
});
fetch(request).then(() => { /* handle response */ });
You can find more information about using Headers in the docs.
I'm getting a problem when I try to call my WebApi, I need to send in a request header the authorization credentials, but, I'm not getting it up.
My resquest header need to be like this image of the request header generated by my REST tester
Authorization:Basic dXNlcm5hbWU6cGFzc3dvcmQ=
But, when I try to set it on Angular using this code block
$http.defaults.headers.Authorization = 'Basic ' + credentials;
return $http.post('http://localhost:2703/api/Authenticate');
Or this
return $http.post('http://localhost:2703/api/Authenticate', {
headers: { 'Authorization': 'Basic ' + credentials }
});
My request header became like this one
Access-Control-Request-Headers: accept, authorization
Can someone tell me what am I doing wrong? Any help will be appreciated. :)
You can do something like this:
var header = {headers: {'Authorization': 'Basic ' + credentials}}
$http.post(url, payload, header)
.success(function (data) {
//stuff
}
I couldn't resolve my problem using a cross domain request, so, I've configure my Web Api and Web App in the same domain. Doing this, I can change the headers normally and send a post request as I need.
I am trying to do a an HTTP POST to a server.
The data I have to send is a json object.
The problem is that $http.post in angular override the method with options.
I can make this config
.config(['$httpProvider', function ($httpProvider) {
//Reset headers to avoid OPTIONS request (aka preflight)
$httpProvider.defaults.headers.common = {};
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};
}])
and changes from options to POST, but I can't set the content-type to "application/json", and I am getting a "415 Unsupported Media Type"
Thank you
$http.post in angular doesn't override the method with OPTIONS. It appear that you are trying to call api in different domain than the one your JS code come from. This is called Cross Domain. For such cases the browser performs preflight request with OPTIONS in order to see the returned headers. In your backend response you should add the header Access-Control-Allow-Origin: * for example. When the browser sees that header he performs the actual POST request.
More details here: https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS
Hope this is helps!
Add
$httpProvider.defaults.headers.post['Content-Type'] = 'application/json';
But note this will set the Content-Type header globally.
If you need to set the content-type per call, you should use $http.post like
$http.post("/foo/bar", requestData, {
headers: { 'Content-Type': 'application/json'},
transformRequest: transform
}).success(function(responseData) {
//do stuff with response
});
I'm using angular and angular-resource version 1.1.5 and I'm using a $resource to make a request to a REST service. But it seems like the custom headers is not appended to the request. My definition is as below. Is there anything I did wrong?
myApp.factory('User', function($resource) {
var User = $resource('http://localhost\\:7017/mydomain/users/jack', { }, {
get: {
method: 'GET',
isArray: false,
headers: {'X-Requested-By':'abc'}
}
});
return User;
});
Read this to see how to configure default headers in one place: http://docs.angularjs.org/api/ng.$http
EDIT:
Your header must be included in Access-Control-Allow-Headers header in response to the OPTIONS request, which is sent automatically prior to your GET request.
You can modify the default headers inside the $httpProvider.
the headers are an object and separated intocommon, patch, post and put
so if you want to change the default for all your requests, just do a
$httpProvider.defaults.headers.put['Content-Type'] = 'application/json';
You have to call get method by using its name, i.e User.get(callback)
It seems that custom headers do not get sent when get method is called with User.query(callback)
I'm trying to make a request to an API service that has a dynamic 'authorization' header.
var domain = "http://www.externalapi.com",
actions = {
'login': {
method: 'POST'
},
'objects': {
method: 'GET',
headers: {
'Authorization': Request.getAuthHeader()
}
}
};
var requests = $resource(domain, {}, actions);
requests.objects();
Request is a service I've written that has a method that builds the auth header based on the api requirements, the has it returns is correct.
When looking at the request to domain, however, I see not 'Authorization' header...
I've also tried passing in a static string, still no header.
So the issue was my versions.
After updating Angular to 1.2.0rc1 I left my ngResource module at 1.0.8.
After updating both to 1.2.0rc1 (I assume 1.1.2 would work as well) I was able to assign headers from the actions object of $resource.