角/Laravel CORS

Posted 2023-03-04

【中文标题】角/Laravel CORS

【英文标题】：Angular/Laravel CORS

【发布时间】：2019-08-22 12:47:23

【问题描述】：

我正在创建一个 Laravel/Angular 应用程序，并尝试将两者连接起来以实现我的登录实现。

当我登录时，我从网络选项卡中收到 200 ok 响应代码。在控制台中，我得到以下信息。

从源“http://localhost:4200”访问“http://127.0.0.1:8000/api/auth/login”处的 XMLHttpRequest 已被 CORS 策略阻止：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段内容类型。 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');

);

关于发生了什么的任何想法。

【参考方案1】：

将Cors 中间件添加到$middlewares 会在您的应用程序中全局应用中间件，因此无需通过api.php 调用中间件。

另外，您缺少->header('Access-Control-Allow-Headers');

Access-Control-Allow-Headers 响应标头用于响应包含 Access-Control-Request-Headers 的预检请求，以指示在实际请求期间可以使用哪些 HTTP 标头。

【参考方案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');

);

【参考方案3】：

只需像这样更改 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;