Access-Control-Allow-Origin不允许Origin，但定义了通配符？

Question

I'm working on a project (frontend) that will communicate with an other one (API) in an other domain.

For now, I'm working in local, with this configuration :

• Frontend : http://127.0.0.1:9000
• API : http://127.0.0.1:9100

In my API program, I defined an OPTIONS request that returns these headers along with a HTTP status code 200 :

Access-Control-Allow-Headers:accept, origin, x-requested-with, content-type
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Max-Age:15
Content-Length:0

Using jQuery, I make an Ajax request to this url. As an example, here's the Request header for the OPTIONS query :

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, origin, x-requested-with, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:127.0.0.1:9100
Origin:http://127.0.0.1:9000
Referer:http://127.0.0.1:9000/login
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.63 Safari/537.31

This goes with success (Status code : 200 OK), and then a POST is made to the http://127.0.0.1:9100/auth/login , as expected, but I got this in my Network panel :

Status : Canceled | Type : Pending

If I look in the console, I got this error :

XMLHttpRequest cannot load http://127.0.0.1:9100/auth/login . Origin http://127.0.0.1:9000 is not allowed by Access-Control-Allow-Origin.

But, as we can see, Access-Control-Allow-Origin is defined as "*". I also tried to change it to "127.0.0.1:9000" and " http://127.0.0.1:9000 ", the same error appears on the console.

Now, some details about my jQuery ajax command. The ajax itself is quite simple :

jQuery.ajax({
    'url': '/auth/login',
    'type': 'POST',
    'data': {'login': 'abc', 'password': 'def'},
    'timeout': 15000
}).done(function (data, status, xhr) {
    console.log ('ok');
}).fail(function (xhr, status, description) {
    console.error('oups');
});

But the Base URL for the API is added after, via the jQuery.ajaxPrefilter method :

jQuery.ajaxPrefilter (function (options) {
    var url = document.createElement('a');
    url.href = options.url;
    options.url = 'http://127.0.0.1:9000' + url.pathname;
});

This is made in order to avoid changing multiple files when the url changes. I don't know if this is the origin of the problem, but so far I can't make the POST request works even if everything regarding the CORS configuration seems to be ok.

What did I do wrong ?

Answer 1

Ok the answer is quite simple in fact, but you need it to know.

The Headers doesn't only be made available on the OPTIONS request, but on ALL the request (even the GET/POST/PUT/DELETE requests).

That's why it wasn't working for me.