I'm calling my RESTful API from Javascript in a CORS scenario.
I'm using JQuery to send my POST authenticated request.
Here is an example:
function post(settings, addAccessToken) {
settings.type = 'POST';
settings.cache = false;
if (settings.dataType === undefined)
settings.dataType = 'json';
if (addAccessToken) {
settings.xhrFields = { withCredentials: true };
settings.beforeSend = function (request) {
request.setRequestHeader('Authorization', 'Bearer <my access token>');
};
settings.headers = {
'Authorization': 'Bearer <my access token>'
};
}
return $.ajax(settings);
}
On server side, I can see the first call coming with the 'Authorization' Header correctly valued, while all the others don't have such Header.
What am I missing?
Thank you
cghersi
I solved my issue so I want to give the answer to everybody else is in the same situation.
1) The problem was to enable OPTIONS http request from server-side. In fact, there is a first call to the same url but with verb 'OPTIONS' and then a second call to the real url with POST|GET method. If the server doesn't properly answer to the first 'OPTIONS' call, e.g. specifying the correct Allowed Headers etc., the second call doesn't work.
2) The notation
settings.headers = {
'Authorization': 'Bearer <my access token>'
};
is not working. The only way to setup an header is:
settings.beforeSend = function (request) {
request.setRequestHeader('Authorization', 'Bearer <my access token>');
};
Hope this can help other people in the future.
cghersi
Related
I am making a request for getting an access token with Oauth 2.0, in javascript. The docs of the API use the request module (deprecated), so I am searching for an alternative. I tried with fetch and axios, but none of them seem to be working.
You can read this from the docs.
If i make the request with axios (code) it returns this error,
while if I use fetch (code) this it the result.
At least fetch makes the call successfully, but I have the impression that he cannot pass the auth parameter, because the error is caused beacause of this.
May someone help me? I appreciate it a lot.
You can use fetch or axios instead of request, but they use different options attributes, compared to request.
With axios, it is
const options = {
method: 'POST',
auth: {
username: client.id,
password: client.secret
},
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: 'grant_type=client_credentials&scope=basic'
};
instead.
With fetch, it is
const options = {
method: 'POST',
headers: {
authorization: "Basic " + Buffer.from(client.id + ":" + client.secret).toString("base64"),
'content-type': 'application/x-www-form-urlencoded'
},
body: 'grant_type=client_credentials&scope=basic'
};
You can use axios this way:
axios.interceptors.request.use(function (config) {
// Do something before request is sent
config[Authentiaction] = "Bearer" + token
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
I think this can help.
Using Spotify Documentation for Client Credential Flow here:
I was able to create a API request in google app script (Javascript).
function callAPI () {
SPOTIFY_CLIENT_SECRET = secret
SPOTIFY_CLIENT_ID = id
const HEADERS = {
"Content-Type": "application/json",
'Authorization': `Basic ${Utilities.base64Encode(SPOTIFY_CLIENT_ID + ':' + SPOTIFY_CLIENT_SECRET)})`
}
const BODY = {
'grant_type': 'client_credentials'
}
var url = `https://api.spotify.com/api/token`
var requestOptions = {
'method': 'POST',
'headers': HEADERS,
'payload': JSON.stringify(BODY),
'muteHttpExceptions': true,
'redirect': 'follow'
};
var response = UrlFetchApp.fetch(url, requestOptions);
var data = JSON.parse(response.getContentText());
I am confused about two things, please be able to answer both.
1). The Spotify documentation states to enter "Basic" before the client credentials in the authorization header.
Yet, when I run this code, I get this error
{ error:
{ status: 400,
message: 'Only valid bearer authentication supported' } }
If, I'm am using client credential flow, why does it think I am using a bearer token? (Also if I change authentication to Bearer I get a 401 error "Invalid access token")
2). Could you provide an example of a working version of this code and why it was able to run opposed to mine?
I believe your goal is as follows.
You want to convert the following curl command to Google Apps Script.
curl -X "POST" -H "Authorization: Basic ZjM4ZjAw...WY0MzE=" -d grant_type=client_credentials https://accounts.spotify.com/api/token
In this case, grant_type=client_credentials is sent as the form data. When I saw your script, it is sent as the data. And you use the URL of https://api.spotify.com/api/token. But the curl command uses https://accounts.spotify.com/api/token. `I thought that these might be the reason for your issue. So when your script is modified, it becomes as follows.
Modified script:
function callAPI() {
SPOTIFY_CLIENT_SECRET = secret; // Please set your value.
SPOTIFY_CLIENT_ID = id; // Please set your value.
const HEADERS = {
'Authorization': `Basic ${Utilities.base64Encode(SPOTIFY_CLIENT_ID + ':' + SPOTIFY_CLIENT_SECRET)}` // Modified
}
const BODY = {
'grant_type': 'client_credentials'
}
var url = "https://accounts.spotify.com/api/token";
var requestOptions = {
'method': 'POST',
'headers': HEADERS,
'payload': BODY,
'muteHttpExceptions': true,
};
var response = UrlFetchApp.fetch(url, requestOptions);
var data = response.getContentText();
console.log(data)
}
Note:
When I saw your script again, I noticed that Basic ${Utilities.base64Encode(SPOTIFY_CLIENT_ID + ':' + SPOTIFY_CLIENT_SECRET)}) is required to be modified. Because in this case, it's Basic ###). Please remove ).
References:
Client Credentials Flow
fetch(url, params)
I figured it out! For some reason you need to add the client id and client secret in the form data. The Spotify docs says to put them in the headers base64 encoded but that is not the case in this instance. (You don't even need to encode them)
Also you don't even need to include the content-type parameter like the doc says.
working code looks like this
function callAPI () {
let SPOTIFY_CLIENT_SECRET = secret
let SPOTIFY_CLIENT_ID = id
const BODY = {
'Content-Type': 'application/x-www-form-urlencoded',
'grant_type': 'client_credentials',
"client_id": SPOTIFY_CLIENT_ID,
"client_secret": SPOTIFY_CLIENT_SECRET,
}
var url = "https://accounts.spotify.com/api/token";
var requestOptions = {
'method': 'POST',
'payload': BODY,
'muteHttpExceptions': true,
};
var response = UrlFetchApp.fetch(url, requestOptions);
var data = response.getContentText();
console.log(data)
}
I found my answer from reading about a similar problem here
I'm trying to execute query using REST API, in a lightning web component.
the request in Postman returning result with success (enabling Follow Authorization header)
but in the JavaScript in lightning web component it returns 401 Unauthorized
the code in the java script is a follow :
let sessionId = 'tokken';
let baseUrl = window.location.origin;
let header = {
"Content-Type": "application/json",
"Accept": "application/json",
"Authorization": "Bearer " + sessionId,
};
if (sessionId) {
let options = {
method: "GET",
mode: 'no-cors',
redirect: 'follow',
headers: header,
};
fetch(baseUrl + '/services/data/v50.0/query/?q=SELECT+name+from+Account', options).then((response) => {
console.log(JSON.stringify(response));
if (!response.ok) {
// throw Error(JSON.stringify(response));
} else {
return response.json();
}
}).then((repos) => {
console.log(repos, repos);
});
}
am I missing something ?
Since you can not pass the value Authorization to no-cors mode, you will need to add CORS configuration in your SalesForce as safe endpoint where they let you make a call.
You can not send Authorization header with "no-cors" mode.
mode: "no-cors"only allows a limited set of headers in the request:
Accept
Accept-Language
Content-Language
Content-Type with a value of application/x-www-form-urlencoded, multipart/form-data, or text/plain
in my React app, I have the following API POST to allow the user to edit their profile (name and image).
static updateProfile(formData, user_id) {
const request = new Request(`http://localhost:4300/api/v1/profiles/${user_id}`, {
headers: new Headers({
'Authorization': getBearerToken()
}),
mode: 'no-cors',
method: "POST",
body: formData
});
return fetch(request).then(response => {
return response.json();
}).catch(error => {
return error;
});
}
The problem with the above is the header with the Authorization token is not being sent in the POST...
How can I get the Authorization header to be send in the fetch request above?
FYI, for non-multipart forms, the authorization token is sent successfully like so:
static loadProfile(user_id) {
const request = new Request(`http://localhost:4300/api/v1/profiles/${user_id}`, {
headers: new Headers({
'Authorization': getBearerToken(),
'Accept' : 'application/json',
'Content-Type' : 'application/json',
})
});
return fetch(request).then(response => {
return response.json();
}).catch(error => {
return error;
});
}
You can’t use no-cors mode if you set any special request headers, because one of effect of using it for a request is that it tells browsers to not allow your frontend JavaScript code to set any request headers other than CORS-safelisted request-headers. See the spec requirements:
To append a name/value pair to a Headers object (headers), run these steps:
Otherwise, if guard is "request-no-cors" and name/value is not a CORS-safelisted request-header, return.
In that algorithm, return equates to “return without adding that header to the Headers object”.
Authorization isn’t a CORS-safelisted request-header, so your browser won’t allow you to set if you use no-cors mode for a request. Same for Content-Type: application/json.
If the reason you’re trying to use no-cors mode is to avoid some other problem that occurs if you don’t use, the solution is to fix the underlying cause of that other problem. Because no matter what problem you might be trying to solve, no-cors mode isn’t going to turn out to be a solution in the end. It’s just going to create different problems like what you’re hitting now.
By using below code you can make a fetch request with Authorization or bearer
var url = "https://yourUrl";
var bearer = 'Bearer '+ bearer_token;
fetch(url, {
method: 'GET',
withCredentials: true,
credentials: 'include',
headers: {
'Authorization': bearer,
'X-FP-API-KEY': 'iphone',
'Content-Type': 'application/json'}
}).then((responseJson) => {
var items = JSON.parse(responseJson._bodyInit);
})
.catch(error => this.setState({
isLoading: false,
message: 'Something bad happened ' + error
}));
Couldn't find any documentation on this, so before I dig deep in code does anyone out there know how to use basic authentication when making a REST request using 'fetch' (https://github.com/github/fetch).
Just tried the following line, but the header was not set in the request:
fetch('http://localhost:8080/timeEntry', {
mode: 'no-cors',
headers: { 'Authorization': 'Basic YW5kcmVhczpzZWxlbndhbGw=' }
})
.then(checkStatus)
.then(parseJSON)
.then(function(activities) {
console.log('request succeeded with JSON response', data);
dispatch(activitiesFetched(activities, null));
}).catch(function(error) {
console.log('request failed', error);
dispatch(activitiesFetched(null, error));
});
The username and password is my own first and last name, using curl it works.
If I put { 'Accept' : 'application/test' } Accept is set, just not Authorization... strange.
Just for me to able to continue I added credentials: 'include' which makes the browser to prompt for username and password which is used for communicationg with the REST backend. Just for testing, will use OAuth further on.
fetch('http://localhost:8080/timeEntry', {
mode: 'no-cors',
credentials: 'include'
})
.then(checkStatus)
.then(parseJSON)
.then(function(activities) {
console.log('request succeeded with JSON response', data);
dispatch(activitiesFetched(activities, null));
}).catch(function(error) {
console.log('request failed', error);
dispatch(activitiesFetched(null, error));
});
no-cors mode prevents the headers from being anything other than simple headers.
"Authorization" header doesn't fit to simple headers. See more here: https://developer.mozilla.org/en-US/docs/Web/API/Request/mode
Note that if you use fetch with Authorization header you will NOT establish a session. You will have to manually add that header for every request. Navigating to secured path would also not be possible.
So to make this work You should pre-authenticate with XMLHttpRequest. You can do this like so:
var authUrl = location.origin + '/secured-path/';
var http = new XMLHttpRequest();
http.open("get", authUrl, false, login, pass);
http.send("");
if (http.status == 200) {
//location.href = authUrl;
} else {
alert("⚠️ Authentication failed.");
}
Note that above is synchronous so you don't need a callback here.
So after doing this you can use fetch without headers e.g. this request should be successful:
fetch(authUrl, {
method: 'get',
}).then(function(response) {
console.log(response);
});
Since it looks like the library you are using is a polyfill for Fetch API, I'm going to work off of the assumption that the syntax should carry through as well.
The samples I found on Mozilla's page indicate that the fetch method signature is fetch('API_ENDPOINT', OBJECT) where object looks like:
myHeaders = new Headers({
"Authorization": "Basic YW5kcmVhczpzZWxlbndhbGw="
});
var obj = {
method: 'GET',
headers: myHeaders
})
So the method becomes:
fetch('http://localhost:8080/timeEntry', obj)
.then(checkStatus)
.then(parseJSON)...
I have not tested this code, but it seems consistent with what I was able to find. Hope this points you in the right direction.