We Keep Coding

XMLHttpRequest POST API Call

Need help to find out why am I not getting any responseText back? I run this same API call on REST client with same parameters and I get response back fine but not through code. SignedToken is JWT token which should be sent in body.
var xapicall = new XMLHttpRequest();
xapicall.open("POST",'https://example.com/initauthn/do',true);
xapicall.setRequestHeader('Content-type', 'application/json');
xapicall.onload = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
xapicall.send(signedToken);

Can't access flask #login-required APIs in front-end

We have a server which is implemented by python flask and it's RESTful. Since it is RESTful, we must develop the front-end pages using APIs.
The problem is, our server uses flask's built-in Login_manager and session modules to manage client sessions. When I try to send requests to #login-required APIs, the server won't allow me. Based on my searches, I have to somehow send front-end's session cookie to the server, along with my requests. So how should I do this (If this is the solution)? And what should I add to my javascript login and API fetch codes?
JS login :
var request = new XMLHttpRequest();
var url = 'http://127.0.0.1:5000/api/login';
var user = {
'email': email,
'password': password
};
request.open('POST', url, true);
request.setRequestHeader("Content-Type", "application/json");
request.onload = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
var resp = JSON.parse(this.response);
if (resp.status === "OK") {
sessionStorage.setItem('user', JSON.stringify(resp.user));
document.cookie = "user_id="+resp.user.id;
window.location.replace('app.html');
} else {
alert("User info not correct");
}
} else {
alert("Request not made");
}
}
request.send(JSON.stringify(user));
And then, script isn't working because the /showApps API is #login-required :
var request = new XMLHttpRequest();
var url = 'http://127.0.0.1:5000/api/showApps';
request.open('GET', url, true);
request.onload = function(e) {
//manage data
}
request.send();

Writing Request Payload property on httprequest

I am trying to develop a browser extension that will help people to some stuff way easier.
One of the things that I need to do is sending couple of http requests.
I need to recreate requests that site makes when doing certain things.
Now site uses Request Payload which is my first time using(used form data),therefore I don't know how to make Request Payload same as when site sends request.
var request = new XMLHttpRequest(),
url = 'https://www.hidden.com/api/v1/tipuser/',
data = 'steam_64=76561198364912967&tip_asset_ids=[]&tip_balance=0',
token ='...';
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("The request and response was successful!");
}
};
request.open('POST', url, true);
request.setRequestHeader('Content-type', 'text/plain');
request.setRequestHeader('authorization', token);
request.send(data);
This is my code and after sending it you can see how my Request Payload looks.
I have been having difficulties for days now and I searched online but couldn't find solution to this.I know that I just have to write it differently .
This is site's request
This is my request
Cheers!

Could you try sending your request as application/json and build your data object like in the example below?
Your Content-type request header should be application/json
var request = new XMLHttpRequest(),
url = 'https://jsonplaceholder.typicode.com/posts/',
data = {
steam_64: '76561198364912967',
tip_asset_ids: [],
tip_balance: 0,
token: '',
};
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("The request and response was successful!");
}
};
request.open('POST', url, true);
request.setRequestHeader('Content-type', 'application/json');
request.setRequestHeader('authorization', data.token);
request.send(JSON.stringify(data));

XMLHttpRequest doesn't send some headers

The title explains my problem clearly. I am testing the AJAX requests of my application but I cannot send some headers, for example Authorization header.
For testing I use this endpoint to echo me the headers I sent. Here is my javascript code:
var loadDoc = function() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
console.log(JSON.parse(this.responseText));
};
}
xhttp.open("GET", "http://headers.jsontest.com/", true);
xhttp.setRequestHeader("Authorization", "JWT token");
xhttp.send();
}
I can send the exact same request with python's requests module. But I can't send it with XMLHttpRequest. XMLHttpRequest can send the Content-Type header and the server echoes me the headers but not Authorization.
What is going on here?

Any way to make AJAX calls to Gmail API without going through JS library?

A simple guide to making a GET request to get a user's messages through Gmail API can be found here.
But the way we are instructed to do the request is in the following manner:
function getMessage(userId, messageId, callback) {
var request = gapi.client.gmail.users.messages.get({
'userId': userId,
'id': messageId
});
request.execute(callback);
}
Is it possible to make the request using the good ol' XMLHttpRequest object on the client side? If so what parameters should be passed into the call?
I have tried this:
var getMessages = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200)
console.log(xhr.responseText);
}
xhr.open( "GET", "https://www.googleapis.com/gmail/v1/users/me/messages", true );
xhr.send();
}
But I get a 401, even after authenticating.

As it states in this answer, you should pass the access token as a query parameter with the name access_token, or prefix the authorization header value with "Bearer", like so:
xhr.setRequestHeader("authorization", "Bearer " + userToken.access_token);