We Keep Coding

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();

Getting an Access Token with Xml HTTP Request

I am having some trouble getting an access token from a site for a web application. The response to the following is
"{"error":"invalid_request","error_description":"The grant type was not specified in the request"}".
I have specified the grant type below but it seems I have not formatted the request correctly.
Any suggestions?
var getToken = new XMLHttpRequest();
getToken.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
getToken.open("POST", "https://api2.libcal.com/1.1/oauth/token", true);
getToken.send('grant_type=client_credentials','client_id=XXX', 'client_secret=XXXXXXXXXXXXXXXXXXXX');

As you are doing a Post Request to get an access token , the parameters should be send in the body (JSON) like below : (I tested ,it works fine )
// form data for the post request
var data = {
"grant_type":"client_credentials",
"client_id": "XXX",
"client_secret": "XXXXXXXXXXXXXXXXXXXX"
};
// construct an HTTP request
var getToken= new XMLHttpRequest();
getToken.open("POST", "https://api2.libcal.com/1.1/oauth/token", true);
getToken.setRequestHeader('Content-Type', 'application/json');
// send the collected data as JSON
getToken.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?

XmlHttpRequest get callback response when request fails

I have a simple request I make to my service:
var request = new XMLHttpRequest();
request.open("OPTIONS", url, true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.setRequestHeader('Accept', 'application/json');
request.onreadystatechange = function () {
if (request.readyState != 4) {
return;
}
var authType = request.getResponseHeader("WWW-Authenticate");
makeRequest(...);
};
request.send();
}
So what I'm trying to achieve is make a call to my endpoint to see what's the authorisation type (basic or bearer) and then when I get the auth type I will make the actual request with the proper credentials.
If I make the request manually I get the 401 unauthorised which is normal but I also get the WWW-Authenticate: Basic ... in my headers. However if I do this javascript call it will just fail with 401:unauthorised but I don't get this failed response in my callback so the authType will be undefined.
I haven't used javascript before so the question is how can I get the response in the callback even if the request failed with unAuthorised ?

XMLHttpRequest has an onerror callback that you can use:
var request = new XMLHttpRequest();
...
request.onerror = function(){
if (this.status == 401) {
}
}
...
request.send();

Ajax request in Chrome extension

I am developing an extenion which makes an ajax request to a web server like this
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader("Content-Type","application/json");
xhr.send(JSON.stringify(data));
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 204)
{
//debugger;
alert("Logged in");
flag = 1;
_callBack(xhr, xhr.readyState);
}
}
And here i am able to logged in with status = 204 and now once i logged in i am trying to go for different directory for example www.example.com/index/enter with another ajax request in same extension but could not able to do so.

Are you sure you're expecting the same HTTP response code? It's very likely that the server you're making requests to is sending a different response for a different request URL.
204 No Reponse = there is no response data
200 OK = there is data