Угловой / Laravel CORS

Question

Я создаю приложение Laravel / Angular и пытаюсь соединить их для реализации входа в систему.

При входе в систему я получаю код ответа 200 ok на вкладке сети.В консоли я получаю следующее.

Доступ к XMLHttpRequest в 'http://127.0.0.1:8000/api/auth/login' из источника' http://localhost:4200' был заблокирован политикой CORS: Запрос содержимого поля заголовкаТип Access-Control-Allow-Headers не разрешен в ответе перед полетом.login.component.ts: 26

HttpErrorResponse {заголовки: HttpHeaders, status: 0, statusText: «Неизвестная ошибка», url: «http://127.0.0.1:8000/api/auth/login", ok: false,…}

Я создал промежуточное программное обеспечение с именем Cors.php

public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }

Это зарегистрировано в моем ядре примерно так:

 protected $middleware = [
        \App\Http\Middleware\Cors::class, 
    ];

protected $routeMiddleware = [
        'cors' => \App\Http\Middleware\Cors::class, 
    ];

Это также называется в моем файле маршрутов api.php кактак что

Route::group([

    'middleware' => ['api', 'cors'],
    'prefix' => 'auth'

], function ($router) {

    Route::post('login', 'API\AuthController@login');
    Route::post('logout', 'API\AuthController@logout');
    Route::post('refresh', 'API\AuthController@refresh');
    Route::post('me', 'API\AuthController@me');

});

Есть идеи о том, что происходит.

Answer 1

Добавление Cors промежуточного программного обеспечения к $middlewares применяет промежуточное программное обеспечение глобально в вашем приложении, поэтому нет необходимости вызывать промежуточное программное обеспечение через api.php.

Кроме того, вам не хватает ->header('Access-Control-Allow-Headers');

Заголовок ответа Access-Control-Allow-Headers используется в ответ на предварительный запрос, который включает в себя Access-Control-RequestЗаголовки, чтобы указать, какие заголовки HTTP можно использовать во время фактического запроса.

Answer 2

Измените свой код на:

public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, 
        OPTIONS')
        ->header('"Access-Control-Allow-Headers"', '*');
}

И

protected $middleware = [
    \App\Http\Middleware\Cors::class, 
];

protected $routeMiddleware = [
 //do not add Cors here
];

И

Route::group([

'middleware' => ['api'],
'prefix' => 'auth'

], function ($router) {

   Route::post('login', 'API\AuthController@login');
   Route::post('logout', 'API\AuthController@logout');
   Route::post('refresh', 'API\AuthController@refresh');
   Route::post('me', 'API\AuthController@me');

});