Access to XMLHttpRequest at XXX from orgin in laravel6 and angular 8

Question

I use laravel6 and angular 8 I want send POST request in angular project to server by an API but after OPTION request method and give an error in chrome browser:

Access to XMLHttpRequest at 'http://localhost:8000/api/user/register' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I created a middleware in 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');
}

then define middleware in kernel : app/Http/kernel.php

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

and define route:

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');
  });
});

But again I get the same Error Please help me solve it

Maxim Abdalov Maxim Abdalov · Accepted Answer · 2019-11-06T12:36:43

In first create cors middleware, for example

<?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;
        }
    }

then add in Http/Kernel.php in array $middleware:

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

After it all requests with type OPTIONS will return response 200 with headers.

Access to XMLHttpRequest at XXX from orgin in laravel6 and angular 8

3 Answers