HTTP request with custom headers returns 400 error (invalid HTTP status code)

Question

I am trying to make HTTP POST request with custom headers using AngularJS (in my case API_VERSION and Distributor). So my code looks like this:

$http({
    method: "POST",
    url: url,
    data: {
        "Email": email,
        "Password": password,
        "DistributorId": 2
    },
    headers: {
        "API_VERSION": 4,
        "Distributor": 2
    }
}).then(function(response) {
    console.log("success");
}, function(response) {
    console.log("error");
});

I tried to run this code in Chrome and got next error:

OPTIONS <url>
XMLHttpRequest cannot load <url>. Invalid HTTP status code 400

As far as I understand browser generates preflight request with Origin, Access-Control-Request-Headers and Access-Control-Request-Method headers. Server should then respond with the following headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: API_VERSION, Distributor

But in my case API_VERSION and Distributor headers are not in Access-Control-Allow-Headers list. This means that I can't make HTTP POST request with this headers, as I understand.

This behavior is observed both in Chrome and Firefox, but works fine in Safari. I have tested this webservice with Advanced REST Client and all works just fine too.

What is the reason of this behavior and how can I get this to work?

Thanks in advance!

UPDATE: It's very strange, but when I removed all custom headers I still get the same 400 error. And Safari tells me that:

Failed to load resource: Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

Indeed, Content-Type header is not in the Access-Control-Allow-Headers list as Chrome shows me.

It seems that your server is blocking the OPTIONS preflight request. Is that intentional? — Anid Monsur, Aug 29 '15 at 20:26
@AnidMonsur Unfortunately, I don't know. Can I tell the browser not to send OPTIONS preflight request somehow? — Fadil Mamedov, Aug 29 '15 at 20:31
http://stackoverflow.com/questions/22968406/how-to-skip-the-options-preflight-request-in-angularjs — Anid Monsur, Aug 29 '15 at 20:33
Thank you very much! I have tried this but result is still the same... — Fadil Mamedov, Aug 29 '15 at 20:49
What is your backend serv? Have you tried to add CORS plugins? — Medet Tleukabiluly, Aug 29 '15 at 21:05
@evc Unfortunately, the backend server is not under my control and I can't manage it. Thus, I can only try to solve this problem on frontend — Fadil Mamedov, Aug 29 '15 at 21:09
@FadilMamedov you cannot, server must allow external requests. Otherwise it doesn't make sense - it was ment to prevent what you are trying to do — Medet Tleukabiluly, Aug 29 '15 at 21:10

HTTP request with custom headers returns 400 error (invalid HTTP status code)

0 Answers0