Laravel API with Angular 5 - Access-Control-Allow-Origin Issue

Question

我使用 Angular 5 前端和 Laravel 5.6 后端作为 Rest API

现在我正在尝试使用以下方法获取访问令牌：

   const url     = 'http://127.0.0.1:8000/oauth/token' ;
   const body    = JSON.stringify({
                      'client_id'    : '8',
                      'client_secret': 'nMfgx0XrlfvImZK1vqu7PucCaaezDZofJOhTLh4m',
                      'grant_type'   : 'password',
                      'username'     : 'admin',
                      'password'     : '0a09943d507c591ae7269042a57db16ac9a2b971'
                    });

    const httpOptions = {
                          headers: new HttpHeaders({
                            'Accept'      : 'application/json',
                            'Content-Type':  'application/json'
                          }
                          )
                        };

    const res  = this.http.post<any>(url, body, httpOptions)
                          .subscribe(myres => { console.log(myres); }) ;

它在 PostMan 上运行良好，但使用 Angular 显示此错误：

登录：1 无法加载http://127.0.0.1:8000/oauth/token：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问Origin ' http://localhost:4200 '。

我听说应该使用称为：

header('Access-Control-Allow-Origin', '*')ce

Answer 1

你需要 cors 包：

composer require barryvdh/laravel-cors

安装后，转到 /config/app.php，将以下内容添加到 'providers' 数组：

Barryvdh\Cors\ServiceProvider::class,

在 /app/Http/Kernel.php 添加以下内容：

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

之后运行这个：

php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

然后在 config/cors.php 中的 allowedOrigins 中添加您的角度服务的 url

    'supportsCredentials' => true,
    'allowedOrigins' => ["localhost:4200"],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,

跑步php artisan config:clear，你很高兴去