Laravel API 与 Angular 5 - Access-Control-Allow-Origin 问题答案

【问题标题】：Laravel API with Angular 5 - Access-Control-Allow-Origin IssueLaravel API 与 Angular 5 - Access-Control-Allow-Origin 问题
【发布时间】：2018-04-09 20:17:28
【问题描述】：

我使用 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 显示此错误：

login:1 加载失败http://127.0.0.1:8000/oauth/token: 响应预检请求未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://localhost:4200” 访问。

我听说应该使用一个叫做：

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

【问题讨论】：

您是否尝试搜索例如“laravel 启用 CORS”?
是的，我找到了这个标题（'Access-Control-Allow-Origin', '*'）

标签： ajax angular laravel rest httprequest

【解决方案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 中添加你的 Angular 服务的 url

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

运行php artisan config:clear，一切顺利

【讨论】：

【解决方案2】：

制作新的中间件：php artisan make:middleware addHeadersCors

把这段代码放在里面（Http/Middleware/addHeadersCors.php）：

public function handle($request, Closure $next)
{
    return $next($request)
    ->header('Access-Control-Allow-Origin', '*')
    ->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS')
    ->header('Access-Control-Allow-Headers', 'Origin, Content-Type, X-Auth-Token, Authorization, X-Requested-With');
}

将中间件分配给内核 (Http/Kernel.php)：

protected $middleware = [
    ..
    ...
    \App\Http\Middleware\addHeadersCors::class,
];

【讨论】：

假设您在某个地方找到了这个，请通过提供源链接来正确引用它。否则就是抄袭。

【解决方案3】：

您可能需要也可能不需要在服务器端处理 CORS。如果您在与生产前端不同的域或端口上运行生产 API 后端（这是我所做的并且会推荐），则您将需要 CORS。那么@Hussein 的回答是最好的。

但如果它仅用于本地开发，并且您的端口不同，我不会为您的 laravel 应用程序增加其他复杂性，而是使用代理解决它：

在您的 angular 根目录（您的 package.json 所在的位置）中，创建一个文件 proxy.conf.json

{
    "/api": {
        "target": "http://localhost:8000",
        "secure": false
    }
}

然后更改您的 package.json 以使用此代理：

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    // other scripts
}

现在使用 npm start 而不是 ng serve 运行 webpack 服务器。

See this answer for more details

【讨论】：

【解决方案4】：

Laravel：

作曲家需要 barryvdh/laravel-cors

编辑 app/Http/Kernel.php- middlewareGroup 的 $middlewareGroups 内容：

    'api' => [
        \Barryvdh\Cors\HandleCors::class,
        'throttle:60,1',
        'bindings',
    ],

【讨论】：