Доступ к XMLHttpRequest из источника был заблокирован политикой CORS (приложение Vue.JS вызывает приложение Lumen)

Question

Я использую приложение Vue.JS, которое вызывает API, созданный с помощью Lumen. Я всегда получаю сообщение об ошибке ниже, когда приложение Vue.JS вызывает Lumen API.

Ниже приведено промежуточное программное обеспечение, используемое для CORS в Lumen.

<?php

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        //Intercepts OPTIONS requests
        if($request->isMethod('OPTIONS')) {
            $response = response('', 200);
        } else {
            // Pass the request to the next middleware
            $response = $next($request);
        }

        // Adds headers to the response
        $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE');
        $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
        $response->header('Access-Control-Allow-Origin', '*');

        // Sends it
        return $response;
    }
}

Я добавил это в .htaccess файл люмена в публичной папке

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

ОБНОВЛЕНИЕ 1 заголовок запроса ajax на вкладке сети Chrome: -

Я использую:

Версия PHP: 5.6

Среда разработки: Homestead (Apache)

Answer 1

---

Решено теперь после добавления

header('Access-Control-Allow-Headers: *'); 

вместо

header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token'); 

в промежуточном программном обеспечении CORS.