概述
对于前后端分离的应用,跨域请求是个绕不过去的坎。接下来的 API 系列教程中,学院君将会推出基于 Vue + Laravel + GraphQL 实现的前后端分离的博客应用,这里面自然也涉及到大量跨域请求,跨域请求的解决方案有 CORS 和 JSONP(了解更多明细可以参考这篇教程),但是 JSONP 有个致命缺点 —— 仅支持 GET 请求,所以推荐使用 CORS(Cross-origin resource sharing,跨域资源共享),何况在 Laravel 生态中已经有了 laravel-cors
这样强大的扩展包,拿来即用,只需要配置一个中间件即可上手,非常方便。
安装
在项目根目录下通过 Composer 安装扩展包:
composer require barryvdh/laravel-cors
Laravel 5.5 及以上版本支持自动包发现,无需注册服务提供者,Laravel 5.4 及以下版本需要手动在 config/app.php
中注册服务提供者:
Barryvdh\Cors\ServiceProvider::class,
使用
如果想要全局支持跨域请求,可以在 app/Http/Kernel.php
的 $middleware
数组中添加 HandleCors
中间件:
protected $middleware = [
// ...
\Barryvdh\Cors\HandleCors::class,
];
如果你只想在特定路由中应用 CORS,可将其添加到对应的路由/中间件分组:
protected $middlewareGroups = [
'web' => [
// ...
],
'api' => [
// ...
\Barryvdh\Cors\HandleCors::class,
],
];
至此,如果无需额外配置就可以在应用中实现跨域请求了。安装、配置中间件,两步搞定,是不是很简单?
配置
如果你想要进行一些自定义配置,可以通过如下命令将 laravel-cors
扩展包的配置文件发布到 config
目录下:
php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
以下是该配置文件默认配置值(config/cors.php
):
return [
/*
|--------------------------------------------------------------------------
| Laravel CORS
|--------------------------------------------------------------------------
|
| allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
| to accept any value.
|
*/
'supportsCredentials' => false,
'allowedOrigins' => ['*'],
'allowedOriginsPatterns' => [],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'],
'exposedHeaders' => [],
'maxAge' => 0,
];
如果使用了自定义的请求头,例如 X-Auth-Token
或 X-Requested-With
,必须要在 allowedHeaders
中包含它们(或者简单设置为 *
包含所有请求头)。
设置这些约束的时候,开发的时候可以宽松一些,但是如果真正在生产环境中,还是尽可能严格一些,避免接口被滥用,造成生产环境的安全隐患和资源浪费。