被 CORS 策略阻止：“Access-Control-Allow-Origin”header 包含多個值

Question

我什么時候嘗試使用 JWT 連接后端 api 它顯示了這個問題？

Laravel代碼

    public function handle($request, Closure $next)
    {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Headers: Content-type, X-Auth-Token, Authorization, Origin');

        return $next($request);
    }
}

<?php

Route::group([
    'middleware' => 'api',
], function ($router) {

    Route::post('login', 'AuthController@login');
    Route::post('logout', 'AuthController@logout');
    Route::post('refresh', 'AuthController@refresh');
    Route::post('me', 'AuthController@me');

});

        \App\Http\Middleware\CORS::class,

        'CORS' => \App\Http\Middleware\CORS::class,

angular代碼

  onSubmit()  {
      return this.http.post('http://localhost:8000/api/login', this.form).subscribe(
        data => console.log(data),
        erro => console.log(erro)
      );
  }

Answer 1

中間件：

    public function handle($request, Closure $next)
{

    $origin = $request->header('origin');
    $origin = $origin ?? '*';

    // ALLOW OPTIONS METHOD
    $headers = [
        'Access-Control-Allow-Origin' => $origin,
        'Access-Control-Allow-Methods'=> 'GET, POST, DELETE, PUT, OPTIONS, HEAD, PATCH',
        'Access-Control-Allow-Headers'=> 'Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Set-Cookie',
        'Access-Control-Allow-Credentials'=> 'true'
    ];

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

    $response = $next($request);

    if($response instanceof JsonResponse){
        foreach($headers as $key => $value) {
            $response->header($key, $value);
        }
    }

    return $response;
}