首页 > 解决方案 > 角/Laravel CORS

问题描述

我正在创建一个 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');

});

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

标签: phpangularlaravelcors

解决方案


添加Cors中间件以$middlewares在您的应用程序中全局应用中间件,因此无需通过api.php.

另外,你错过了->header('Access-Control-Allow-Headers');

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


推荐阅读