XMLHttpRequest cannot load URL. Response for preflight has invalid HTTP status code 401

Hello guys,

I am trying to load URL (which is SSRS Report) which is having authentication. Below is the code

let header = new Headers();
header.append(‘Access-Control-Allow-Credentials’, ‘true’);
header.append(“Access-Control-Allow-Headers”, “Content-Type, Authorization, Content-Length, X-Requested-With”);
header.append(“Access-Control-Allow-Methods”, “GET, POST, OPTIONS”);
header.append(‘Authorization’, 'Basic ’ + btoa(username:password));

let options = new RequestOptions({ headers: header});

this.http.get(url, options)
.map(res => res.text())
.subscribe(data => {
console.log("success: " + data);
this.myVal = data;
}, err => {
console.log("error: " + err);
this.myVal = err;

When i run it, receiving the following error
XMLHttpRequest cannot load https://xxx. Response for preflight has invalid HTTP status code 401.

When i checked in browser Developer tools, under Network tab i can see the below error.


I understand this error is due to the preflight request (sending authorization in header) but not sure how to resolve this error as there is nothing i can do much on server side. Coz, when i execute the same URL using Boomerang (an extension in chrome) it is getting the response.

Thank you

That’s a problem. Server side is the only place this can properly be fixed.

Thanks for your response.

But in that case when i call the same URL and pass username & password in headers (Auth) from Boomerang an extension in Chrome i am getting response. May i please know why?

Also, is there any thing you can suggest me where i can fix this on server side?

Thank you

Because CORS.

I think this can help you with the oauth thing:


I will give a try. Thanks for the link Aditya.

That won’t help the least bit with the problem posted. As @rapropos said, this has to be taken care of at the server level to be fixed properly.

(Or you can google for a “CORS proxy” and use one of these for development…)

Solution you need is here