Доступ к XMLHttpRequest в XXX из orgin в laravel6 и angular 8

Question

Я использую laravel6 и angular 8. Я хочу отправить POST-запрос в угловом проекте на сервер через API, но после OPTION-метода запроса и выдать ошибку в браузере chrome:

Доступ к XMLHttpRequest в 'http://localhost:8000/api/user/register' от источника 'http://localhost:4200' заблокировано политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Я создал промежуточное ПО в App \ Http \ Middleware:

public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', 'http://localhost:4200')
        ->header('Access-Control-Allow-Methods', 'POST, OPTIONS')
        ->header('Access-Control-Allow-Credentials', 'true')
        ->header('Access-Control-Max-Age', '10000')
        ->header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With');
}

, затем определил промежуточное программное обеспечение в ядре: app / Http / kernel.php

 'cors' => \App\Http\Middleware\Cors::class,

и определите маршрут:

Route::group(['prefix' => 'user','middleware' => 'cors'], function () {
  Route::post('login', 'Api\AuthController@login');
  Route::post('register', 'Api\AuthController@register');
  Route::group(['middleware' => 'auth:api'], function(){
    Route::post('getUser', 'Api\AuthController@getUser');
  });
});

Но снова я получаю ту же ошибку. Пожалуйста, помогите мне решить ее

Answer 1

Сначала создайте промежуточное ПО cors, например

<?php

    namespace App\Http\Middleware;

    use Closure;

    class Cors
    {
        public function handle($request, Closure $next)
        {
            $headers = [
                'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
                'Access-Control-Allow-Headers'=> 'X-Requested-With, Content-Type, Accept, Origin, Authorization',
                'Access-Control-Allow-Origin' => '*'
            ];

            if($request->getMethod() === 'OPTIONS') {
                // The client-side application can set only headers allowed in Access-Control-Allow-Headers
                return \response('', 200, $headers);
            }

            $response = $next($request);
            foreach($headers as $key => $value)
                $response->header($key, $value);
            return $response;
        }
    }

, затем добавьте Http / Kernel.php в массив $ middleware:

protected $middleware = [
        // other middlewares
        Cors::class
    ];

После этого все запросы с типом OPTIONS будутответ 200 с заголовками.

Answer 2

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

Answer 3

Пожалуйста, попробуйте изменить "http://localhost:4200" на" * ",

public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'POST, OPTIONS')
        ->header('Access-Control-Allow-Credentials', 'true')
        ->header('Access-Control-Max-Age', '10000')
        ->header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With');
} 

и зарегистрируйте его в файле app / Http / kernel.php.