使用 laravel-cors 实现 Laravel 的跨域配置，并避免预检行为的发生

原文链接： http://www.ptbird.cn/laravel-cors-to-cors-laravel-app.html

使用 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 库地址：

https://github.com/barryvdh/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的方式来支持跨域访问的，那么预检行为是必不可少的。如果要避免预检行为的发生，可以在发送了一个请求之后设置一个预检有效期，在有效期内对该浏览器发送请求不再重复预检，设置这个参数即可达到预期目标，该参数用来指定本次预检请求的有效期，单位为秒。