Angular/Laravel CORS
Я создаю приложение Laravel/Angular и пытаюсь соединить их для реализации входа в систему.
Когда я вхожу в систему, я получаю код ответа 200 ok на вкладке сети. В консоли получаю следующее.
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/auth/login' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response. login.component.ts:26
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", 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');
});
Любая идея о том, что происходит.
Ответы 3
Добавление промежуточного ПО Cors к $middlewares применяет промежуточное ПО глобально в вашем приложении, поэтому нет необходимости вызывать промежуточное ПО через api.php.
Кроме того, вам не хватает ->header('Access-Control-Allow-Headers');
The Access-Control-Allow-Headers response header is used in response to a preflight request which includes the Access-Control-Request-Headers to indicate which HTTP headers can be used during the actual request.
Измените свой код на:
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');
});
просто измените Cors.php следующим образом:
$response = $next($request);
$response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, DELETE');
$response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
$response->header('Access-Control-Allow-Origin', '*');
return $response;