How can I send authorization credentials using fetch?
It worked using postman but on Chrome I keep receiving this message:
Request cannot be constructed from a URL that includes credentials
You can't define user:pass#host in the URL. Just set the Authorization http Header:
var headers = new Headers();
headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
fetch('https://host.com', {headers: headers})
Maybe you can use some extension like Modify Headers and include in it your credentials data like you are including un postman.
Related
I've a problem with the OAuth for the authentication to the API of Meteomatics.
The think I'm trying to do is to get the data from the API of Meteomatics (I've a Basic account). The API respond to me that I've to authenticate but when I set the header for get the token it gave me an error.
The documentation says that I've to put the script below:
var username = '<my_username>';
var password = '<my_password>';
let headers = new Headers();
headers.set('Authorization', 'Basic' + btoa(username + ":" + password));
fetch('https://login.meteomatics.com/api/v1/token', {
//mode: 'no-cors',
method: 'GET',
headers: headers
}).then(function (resp) {
return resp.json();
}).then(function (data) {
var token = data.access_token;
console.log('token', token);
}).catch(function (err) {
console.log('something went wrong', err);
});
The console give me this error:
image of error.
I've read something about CORS, but I don't understand what is the problem. Am I missing something ?
Thanks in advance for those who reply.
Summary of the discussion to the question
It seems that the token endpoint https://login.meteomatics.com/api/v1/token does not support CORS but the API endpoints do, see for example
> curl -I -X OPTIONS -H "Origin:http://localhost" "https://api.meteomatics.com/2022-05-17T00:00:00ZP1D:PT1H/t_2m:C,relative_humidity_2m:p/47.4245,9.3767/html?model=mix&request_type=GET"
Access-Control-Allow-Origin: http://localhost
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,POST,OPTIONS
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
While trying to make the token request from the browser, you handle username and password in client-side Javascript:
headers.set('Authorization', 'Basic' + btoa(username + ":" + password));
You could as well use client-side Javascript to manufacture a request that prefixes the hostname with username and password:
fetch('https://' + username + ':' + password + '#api.meteomatics.com/...')
Meteomatics would accept this method of authentication, while supporting CORS.
A cleaner solution, however, would be to store the username and password on your server and have your server make the token request to https://login.meteomatics.com/api/v1/token. In this case, visitors of your web page would to authenticate to your server, not to meteomatics.com, which for them is a third party.
I have http patch request with Bearer Token Authorization. But the Http Request get a Unauthorized error from the Server, when making the exact same Request(console.log(url + token) and then copy it from the console) in Postman, it works.
What could be the Problem ?
this.getToken().subscribe((data: FormData) => {
const httpOptions = {
headers: new HttpHeaders({
'Authorization': ('Bearer ' + data['access_token'])
})
}
console.log("URL with " + httpOptions.headers.get("Authorization"));
this.http.patch("URL",httpOptions).subscribe((articledata: Article)=>
{
console.log(articledata);
})
});
So this should work, since copying the output and using it in Postman works, but i get a 401 Unauthorized.
For Anyone that needs it, i used http.patch wrong, the headers are the 3rd parameter after url and body.
I am trying to make an api call in Javascript. I am fetching a URL and passing in options, as shown in the image. I am unable to access the API, because I believe I am not passing in my client ID and client secret properly. I also have a redirect URI, but I am unsure of how to specify these in my options and what the syntax is.
Does anyone have any advice on how I can specify this information? Also, is using btoa to convert it to base64 incorrect?
My options I am passing in to my fetch request:
const options = {
method: 'GET',
json: true,
agent: agent,
headers: {
Authorization: 'Basic ' + btoa(client_id + ':' + client_secret),
redirect_uri: `{URI HERE}
}
}
My options I am passing in to my fetch request
Thank you
I'm trying to send a GET request that requires some authorization, however it seems Angular is not keen on sending the required header as well. At least it's not showing up on the network tab in IE.
My code is like this:
var authString = 'NTLM ' + this.base64Encode('username' + ':' + 'passowrd');
$http.get('link/to/api', { headers: { Authorization: authString } })
Am I missing something, or just doing it wrong?
I am trying to use the Cloudinary REST API, but the client libraries provided are not useful for my purpose.
So the settings I use are:
api_key = '111111111111111';
api_secret = 'fdgdsfgsdfgsdfgsdfgsdfg';
my_authorization = 'Basic ' + window.btoa(this.api_key + ':' + this.api_secret);
url_base = 'http://api.cloudinary.com/api/v1_1';
cloud_name = '/http-mysite-com';
connect_method = 'GET';
tag_list = '/tags/image';
I make the call with something similar to this:
request(tag_list) {
connection.request({
method: connect_method,
url: url_base + cloud_name + service_url,
headers: {
'Authorization': authorization,
'Content-Type': 'application/json'
}
}).then(function(response) {
// triumph
}, function(er) {
// all is lost
});
};
The response is this:
XMLHttpRequest cannot load
http://api.cloudinary.com/api/v1_1/http-mysite-com/tags/image. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://myhost:8000' is therefore not allowed
access. The response had HTTP status code 404.
What am I doing wrong?
Thanks
PS I also tried using 'https' instead of 'http', as the documentation recommends. In that case I get back:
XMLHttpRequest cannot load
https://api.cloudinary.com/v1_1/http-mysite-com/tags/image. The
request was redirected to
'http://api.cloudinary.com/api/v1_1/http-mysite-com/tags/image',
which is disallowed for cross-origin requests that require preflight.
Admin API calls use your api_secret which should not be revealed in your client-side code. That's why Cloudinary doesn't support CORS headers for the Admin API.
Therefore, Admin API calls should be performed on the server-side only.