fetch Microsoft bearer token not working from the browser - javascript

I am trying to implement that
https://learn.microsoft.com/en-us/graph/auth-v2-service?view=graph-rest-1.0
Its working from node and postman but not the browser
This was copied from postman
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
myHeaders.append("Cookie", "fpc=blabl; stsservicecookie=estsfd; x-ms-gateway-slice=estsfd");
var urlencoded = new URLSearchParams();
urlencoded.append("client_id", "bla-bla");
urlencoded.append("scope", "https://graph.microsoft.com/.default");
urlencoded.append("client_secret", "bla-bla");
urlencoded.append("grant_type", "client_credentials");
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: urlencoded,
redirect: 'follow'
};
fetch("https://login.microsoftonline.com/blabla/oauth2/v2.0/token", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
Any ideas what i should include or omit in the fetch request?

The code above will not work in the browser. This code above needs to be executed on the server (you are using "client secret").
If you want browser-only (SPA) authorization, consider using PKCE authorization flow instead.
Other than that, the code looks okay, there is nothing wrong with it.

Related

Accessing in Chrome POST response body from Cloudflare Worker

I am trying to read a response from a Cloudflare Worker API, I have not set anything sepcial about it and in Postman the request works as expected. I am guessing I am missing some header but I am not sure which one or even if that is the reason reading the reponses body is not working in browser.
This is how I fetch the data:
const url = `${process.env.SOME_URL}/v1/method?token=${TOKEN}`
const headers = new Headers();
headers.append("Content-Type", "application/json;charset=UTF-8");
const requestOptions = {
method: 'POST',
redirect: 'follow',
mode: 'no-cors',
body: JSON.stringify(body),
headers
// referrerPolicy: 'no-referrer',
};
return fetch(url, requestOptions)
.then(async (response) => {
// no body to be parsed
return response.json()
} )
.then(result => console.log(result))
.catch(error => console.log('error', error));
Looking forward to your answers, thank you.
This behaviour is due to the no-cors config of the fetch-api.
For more details read about opaque requests here:
What limitations apply to opaque responses?

Trying to access JSON endpoint using Javascript with X-Auth-Token leads to error

I am trying to access a JSON endpoint using Javascript with X-Auth-Token but I’m keeping getting error. It’s JSON for a sports API and I’ve followed every instruction in the documentation and code seems to correct to my knowledge however, I can’t spot the problem.
var main = function() {
var url = "https://api.football-data.org/v4/teams/86/matches?status=SCHEDULED";
var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
xhr.setRequestHeader("X-Auth-Token", "601a163917fe417da759316ced98462d");
xhr.send(null);
var data = JSON.parse(xhr.responseText);
return data;};
You need to set the request mode to no-cors for it to allow cross-origin resource sharing.
Try doing this.
var myHeaders = new Headers();
myHeaders.append("X-Auth-Token", "your token");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow',
mode: 'no-cors'
};
fetch("https://api.football-data.org/v4/matches?status=FINISHED", requestOptions)
.then(result => console.log(result))
.catch(error => console.log('error', error));
Hope it helps.

Post request to the firebase cloud functions gives error 500

I have a POST request to the Cloud Functions on Firebase. When I'm trying to make a request, I get a CORS policy error. Ok, I set mode: 'no-cors' and get Failed to load resource: the server responded with a status of 500 ().
Here is the code
let myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Accept", "application/json");
let raw = JSON.stringify({
"description": "Test item",
"email": "testemail#gmail.com"
});
let requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
mode: 'no-cors',
redirect: 'follow',
};
fetch("https://someURl.cloudfunctions.net/someRequest", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
The code is copied from Postman
Any ideas?
As confirmed by jaba, the issue was on server side. Also, same has been documented here.

Connecting to an API from my localhost throws http/2 error

I am connecting to an API. It works fine when I use Postman. But When I use the code generated from postman in my angular project ( on my localhost ) I cannot perform the requests. I get an error: net::ERR_HTTP2_PROTOCOL_ERROR instead of an error code in my browser. The fetch code I use:
let code = params.get('code');
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Host", "login.eveonline.com");
myHeaders.append("Authorization", "Basic NThmYjljMGEwMWM5NGI1ODhkNmUzYzVlMTQ4NjYyYjQ6eVRUUzFGRTdUtZTzBNZkpCZw==");
let body = {
grant_type: "authorization_code",
code: code
};
fetch("https://login.eveonline.com/v2/oauth/token", {
method: 'POST',
headers: myHeaders,
body: JSON.stringify( body )
})
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

How to read variable value sent over Http Post and Get on AWS API Gateway Lambda using Javascript(Node.js)?

I am getting undefined on both POST and Get when I am doing it as bellow:
var name = event.queryStringParameters.name;
Is this a configuration I am missing or what?
To get payload within the body, you can use this solution as well.
Let say, you want to get the email from the event body. It should be like the below example.
Sending request within the body
the header will be "Content-Type: application/json"
and then in your lambda function, you are going to get the email like in the below screenshot.
JSON.parse(event.body).email
When you send payload within the body, the fetch request will be as in below
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({"email":"foo#bar.com"});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch("http://127.0.0.1:3000/contact", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
PS: Above example, for cases, sending post requests within the body.

Categories

Resources