CORS 策略阻止 ZA5C95B86291EA299FCZBE64458ED12702 中的 javascript 请求（API 路由上的 POST）

Question

I got a message from chrome console when I'm trying to make a request in javascript:

Access to XMLHttpRequest at 'https://SITE_B' 
from origin 'https://SITE_A' has been blocked by 
CORS policy: Request header field x-csrf-token is not 
allowed by Access-Control-Allow-Headers in preflight response.

So, SITE_A is a laravel website with valid SSL certificate as well as SITE_B (a simple website). I have the hand over the two websites. My desire is to make a request in javascript from SITE_B to SITE_A in javascript using a POST request and the API system from Laravel.

The idea works well without SSL protocol.

I really don't understand the message.

I put a '*' in 'allowedMethods' and 'allowedHeaders' in laravel config. And I also put it in the apache config file in the SITE_A server.

What do I miss?

EDIT: Barry white extension config

return [
    /*
    |--------------------------------------------------------------------------
    | Laravel CORS
    |--------------------------------------------------------------------------
    |
    | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
    | to accept any value.
    |
    */

    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedOriginsPatterns' => [],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['GET', 'POST'],
    'exposedHeaders' => [],
    'maxAge' => 0,
];

Edit²:

Utility.createRequest = function (method, url, params, callback, doNotReadResponse)
{
"use strict";

if ( Utility.debug )
{
    if ( params )
    {
        console.log('[DEBUG] %s request\n%s?%s', method, url, params);
    }
    else
    {
        console.log('[DEBUG] %s request\n%s (No parameters)', method, url);
    }
}

/* On crée la requête POST. */
const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function (event) {
    if ( event.currentTarget.readyState !== XMLHttpRequest.DONE )
    {
        return;
    }

    if ( event.currentTarget.status === 200 )
    {
        if ( Utility.debug )
        {
            console.log(event.currentTarget);
        }   

        if ( !doNotReadResponse )
        {
            var response = JSON.parse(event.currentTarget.responseText);

            /* Si on a un callback. */
            if ( callback )
            {
                /* NOTE: on vérifie que notre serveur ne renvoit aucune erreur de traîtement. */
                callback(response.ErrorCode === 0, response.Message, response);
            }
        }
        else if ( callback )
        {
            callback(true, "Server responded !", event.currentTarget.response);
        }
    }
    else
    {
        if ( callback )
        {
            callback(false, 'HTTP CODE ' + event.currentTarget.status + ' : "' + event.currentTarget.statusText + '".', event.currentTarget.responseText);
        }
        else
        {
            console.error('HTTP CODE %d : "%s".', event.currentTarget.status, event.currentTarget.statusText);
        }

        console.error(event.currentTarget.responseText);
    }
};

var csrf = Utility.getMeta('csrf-token');

if ( csrf.length <= 0 )
{
    console.error('Unable to find "X-CSRF-TOKEN" in the web page !');

    return false;
}

if ( Utility.debug )
{
    console.log("Using 'X-CSRF-TOKEN:%s'.", csrf);
}   

switch ( method.toLowerCase() )
{
    case 'post' :
        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.setRequestHeader('X-CSRF-TOKEN', csrf);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.setRequestHeader('Authorization', 'Bearer ' + Utility.userToken);
        /* DEBUG: Remove */
        //xhr.send(params);
        xhr.send((params ? params + '&' : '') + 'referer_override=1');
        break;

    case 'get' :
        xhr.open('GET', url + ( params ? '?' + params : '' ), true);
        xhr.setRequestHeader('X-CSRF-TOKEN', csrf);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.setRequestHeader('Authorization', 'Bearer ' + Utility.userToken);
        xhr.send();
        break;

    default:
        return false;
}

return true;
};

Answer 1

'allowedHeaders' => ['*'],

In this line you need to write headers which you allow, now a '*'