XMLHttpRequest无法加载：只能使用Ajax jQuery中的头文件

Question

I try to get JSON data from my own API, from a $.ajax method with jQuery. I must have a header 'Authorization-api-key' in my request otherwise I'll have a 401 status code.

$.ajax({
        type: "GET",
        headers: {'Authorization-api-key' : 'key'},
        dataType: "json",
        crossDomain: true,
        url: "http://urlofmyonlineapi.com/api/ressource",
        success: function (data) {
            alert(data);
        }
});

I have read several threads on stackoverflow about CORS and the'XMLHttpRequest cannot load' problem. So, in my API I have added in response these headers (I use Slim Framework):

$app->response->headers->set('Access-Control-Allow-Origin', '*');
$app->response->headers->set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
$app->response->headers->set('Access-Control-Allow-Headers', '*');
$app->response->headers->set('Access-Control-Allow-Credentials', 'true');

The problem

If I put any header in $.ajax with 'headers: {...}' argument, I have two errors in my browser console:

1. 'OPTIONS' error
2. 'XMLHttpRequest cannot load' error

If I remove headers, I haven't error but I have my 401 status code. If I remove headers AND my API's authentification with the key in request's headers, I get my data.

Answer 1

I have solved the problem: my API didn't accept OPTIONS request. (Ajax with jQuery need to make an OPTIONS pre-request)