$http.post send Authorization Header - angularjs

I am attempting to pass an Authorization Header with a $http.post call to a .NET Web API service.
If I use this :
$http.post(urls.getEmployeeInfo,
{
withCredentials: true,
headers:{ 'Authorization': 'Basic ' + btoa(username + ":" + password)}
}
);
The Authorization header does not get sent to my service.
The following works :
$http({
url: urls.getEmployeeInfo,
method: "POST",
withCredentials: true,
headers: {
'Authorization': 'Basic ' + btoa(username + ":" + password)
}
});
Why doesn't $http.post send the Authorization Header ?
Thanks

$http takes only one argument: config [documentation]
$http.post takes three arguments: url, data, (and an optional) config [documentation]
So if you want to pass configuration options, such as headers, you need to send them as the third argument, rather than the second:
$http.post(urls.getEmployeeInfo, postData,
{
withCredentials: true,
headers:{ 'Authorization': 'Basic ' + btoa(username + ":" + password)}
}
);

Related

Axios post spotify api request return 400

I am using spotify api for a project. Every request I made work fine except this one. I want to be able to create a new playlist. The scope was already checked, it's not the source of the problem. For this I made the following request
axios('https://api.spotify.com/v1/users/' + ID + '/playlists', {
method: 'POST',
headers: {
'Authorization' : 'Bearer ' + data.data.access_token,
"Content-Type" : "application/json"
},
data: {
name: Name,
Description: Description
}
})
when I tried it, I've got 400 Bad Request - The request could not be understood by the server due to malformed syntax. The message body will contain more information
Here's the link for the spotify api references
https://developer.spotify.com/documentation/web-api/reference/playlists/create-playlist/
assuming your ID is defined. You need to stringify your json.
Been a while since I used axios,
axios('https://api.spotify.com/v1/users/' + ID + '/playlists', {
method: 'POST',
headers: {
'Authorization' : 'Bearer ' + data.data.access_token,
'Content-Type': 'application/json'
},
data: JSON.stringify({
name: Name,
description: Description
})
})

Napster API Auth - BAD Request / Unauthorized

I am coding in Reactjs and trying to Auth/Outh into the Napster Web API, followed the information on this page: https://developer.napster.com/api/v2.2#authentication
A sample of my current code:
const API_KEY = 'OWIxMjhlY2MtOTA3Yi00NWJiLThiYTktODc3OTNiYTQ4MGU4';
const API_KEY_SECRET = 'OWIxMjhlY2MtOTA3Yi00NWJiLThiYTktODc3OTNiYTQ4MGU4';
url: 'https://api.napster.com/oauth/access_token',
method: 'post',
params: {
client_id: API_KEY,
client_secret: API_KEY_SECRET
},
headers: {
'Accept':'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer ' + (new Buffer(API_KEY + ':' + API_KEY_SECRET).toString('base64'))
},
data: querystring.stringify({ grant_type: 'authorization_code' })
Response Payload:
{"code":"UnauthorizedError","message":"Authentication code not valid"}
{"code":"BadRequestError","message":"Invalid grant_type parameter"}
According to the documentation and sample below....
curl -v -X POST -d "client_id={api_key}&client_secret={api_secret}&response_type=code&grant_type=authorization_code&redirect_uri={redirect_uri}&code={temporary_code}" "https://api.napster.com/oauth/access_token"
...You don't need to send Authorization headers. It's a normal form post with all the parameters. So If you include the rest of the parameters along with client_id : API_KEY... it should do the trick.

Auth header not being set with Axios PUT request

I am trying to set the header in an Axios PUT request with my Auth token, but when I view the call on the server (running my UI app from localhost) the header is null. I've used this same pattern with Axios and GET, POST, and DELETE calls without issue. Is there anything different with respect to a PUT call and the header?
Below is the code:
return axios.put(BASE_URI + '/submissions/' + submissionId + '/submit',
{
headers: {
'Authorization': 'Bearer ' + this.accessToken,
}
})
In order to add headers in POST or PUT, you need a third argument which will contain headers keys
axios.put(url, data, config)
return axios.put(BASE_URI + '/submissions/' + submissionId + '/submit',
{}, // post/put body
{
headers: {
'Authorization': 'Bearer ' + this.accessToken,
}
})

Can not add bearer token in $resource header

I am not able to add bearer token in $resource service header for token based authentication. I used following code
Factory
return $resource(appSettings.serverPath + "/api/product/:id", null, {
'get': {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + currentUser.getProfile().token
}
}
Also i tried below code as per some research in app.run
$http.defaults.headers.common.Authorization = 'Bearer ' + currentUser.getProfile().token;
But both options do not add this header in my request and i can see request in chrome without this headers and hence got unauthorized response. I am using angular 1.5.9. Any clue on this.
Assuming currentUser is a service and currentUser.getProfile() is a synchronous API:
app.factory("myRestAPI", function(currentUser) {
return $resource(appSettings.serverPath + "/api/product/:id", null, {
'get': {
method: 'GET',
headers: {
//REPLACE expression
//'Authorization': 'Bearer ' + currentUser.getProfile().token
//WITH a function
'Authorization':
function() {
return 'Bearer ' + currentUser.getProfile().token;
}
}
}
);
});
By using a function instead of an expression, the Authorization header will be computed on every call.
From the Docs:1
headers – {Object} – Map of strings or functions which return strings representing HTTP headers to send to the server. If the return value of a function is null, the header will not be sent. Functions accept a config object as an argument.

Meteor Jira POST call

I'm trying to adjust the transition (the status) of an issue in Jira with a POST call. I'm running a Meteor application with a Meteor Backend and a Angular frontend.
Meteor.methods({
performPostCall: function(id, status){
var transitionObject = {
"transition": {
"id": "11"
}
};
var result = HTTP.call('POST', 'https://privateurl/rest/api/2/issue/' + id + '/transitions',
{data: transitionObject},
{headers :{
'Access-Control-Allow-Origin': '*',
'Authorization': 'Basic ******',
'Content-Type': 'application/json',
'Accept': 'application/json'
}});
return result;
}
});
In my frontend, I call the meteor method and handle the callback like this:
Meteor.call('performPostCall', id, status, function(error, success){
if(error){
alert(error);
} else {
alert(success);
}
});
When I press the button that fires the meteor method call, it will this strange and lovely error:
XMLHttpRequest cannot load https://ddp--0266-remoteserverurl/sockjs/info?cb=4bxmv_smgg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'remoteserverurl' is therefore not allowed access. The response had HTTP status code 503.
But I declared this 'Access-Control-Allow-Origin' in the header, so I don't understand why it is complaining. Can somebody tell me what I do wrong?
According to documentation third parameter should be an object with fields required to make a call, in your code data and headers are different objects.
Proper syntax would be :
HTTP.call('POST', 'https://privateurl/rest/api/2/issue/' + id + '/transitions', {
data: transitionObject,
headers :{
'Access-Control-Allow-Origin': '*',
'Authorization': 'Basic ******',
'Content-Type': 'application/json',
'Accept': 'application/json'
}});
Also, result variable is most likely undefined since you try to do it in synchronous fashion, POST call is asynchronous, make use of fourth parameter (callback) to pass data to client, like:
HTTP.call('POST', 'https://privateurl/rest/api/2/issue/' + id + '/transitions', {
data: transitionObject,
headers :{
'Access-Control-Allow-Origin': '*',
'Authorization': 'Basic ******',
'Content-Type': 'application/json',
'Accept': 'application/json'
}}, function (error, result) {
if (!error) {
return result;
}
});

Resources