使用 laravel-cors 实现 Laravel 的跨域配置
一、需求
一个项目需要进行前端跨域,不适用 jsonp
。
因此需要进行 cors 的设置。
最开始的时候,我使用的是路由中间件的方式,但是发现中间件不起作用。
// 路由中间件
public function handle($request, Closure $next)
{
$response = $next($request);
$response->header('Access-Control-Allow-Origin', '*');
$response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, Accept');
$response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
$response->header('Access-Control-Allow-Credentials', 'false');
return $response;
}
因此后面直接使用了 laravel-cors
的库来实现。
laravel-cors 库 地址:
二、使用
安装:
composer require barryvdh/laravel-cors
我使用的是 laravel 5.6 如果低于 5.5 版本需要手动进行注册服务:
位于:config/app.php
,添加下面代码
Barryvdh\Cors\ServiceProvider::class,
全局使用:
如果作为全局使用的中间件,则直接加入到 middleware 中即可:
修改 app/Http/kernel.php
文件:
protected $middleware = [
// ...
\Barryvdh\Cors\HandleCors::class,
];
中间件组使用
如果只是在中间件组中使用,则加入相应的中间件组就OK
protected $middlewareGroups = [
'web' => [
// ...
],
'api' => [
// ...
\Barryvdh\Cors\HandleCors::class,
],
];
配置选项
导出配置:
php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
配置的基本内容:
return [
/*
|--------------------------------------------------------------------------
| Laravel CORS
|--------------------------------------------------------------------------
|
| allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
| to accept any value.
|
*/
'supportsCredentials' => false,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['Content-Type', 'X-Requested-With'],
'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT', 'DELETE']
'exposedHeaders' => [],
'maxAge' => 0,
]
配置的时候有两点注意事项:
- 如果有使用自定义 header,比如
X-Auth-Token
或者X-Requested-With
,则必须在allowedHeader
中包含这些自定义的 header,当然也可以直接使用[*]
来 allow 所有的 header - 如果有白名单或者确定的允许访问的域名列表,则需要在
Origin
中进行相关的配置。 - maxAge属性很重要。相当于http属性(Access-Control-Max-Age)。我们在Network下面看到同一个url有两条请求,url有两条请求,第一条请求的Method为OPTIONS,第二条请求的Method才是真正的Get或者Post。
这是由于Web服务器在处理跨域访问引起的,options其实是一种预检请求,浏览器在处理跨域问题是会先辨别发送的请求是否为复杂请求,如果是则会先向服务器发送一条预检请求,再根据服务器的返回内容由浏览器判断服务器是否允许此次请求,如果服务器是使用cors的方式来支持跨域访问的,那么预检行为是必不可少的。如果要避免预检行为的发生,可以在发送了一个请求之后设置一个预检有效期,在有效期内对该浏览器发送请求不再重复预检,设置这个参数即可达到预期目标,该参数用来指定本次预检请求的有效期,单位为秒。