在 Laravel 5.8 處理 CORS 跨域資源共享

Laravel
, , ,

前言

跨來源資源共享（Cross-Origin Resource Sharing, CORS）是一種使用額外 HTTP 標頭使得目前瀏覽網站的使用者代理取得存取其他來源（或網域）伺服器特定資源權限的機制。Laravel 在不使用 laravel-cors 套件的情況下，可以自行新增中介層處理跨域資源共享。

做法

新增 SetCorsHeaders 中介層。

1
php artisan make:middleware SetCorsHeaders

修改 app/Http/Middleware 資料夾的 SetCorsHeaders.php 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
namespace App\Http\Middleware;

use Closure;

class SetCorsHeaders
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', '*');
    }
}

一般來說，可以直接在 app/Http 資料夾的 Kernel.php 檔的 api 路由群組註冊 SetCorsHeaders 中介層。

1
2
3
4
5
6
7
8
9
10
11
12
13
protected $middlewareGroups = [
    // ...
    'api' => [
        'throttle:60,1',
        'bindings',
        'cors.headers',
    ],
];
// ...
protected $routeMiddleware = [
    // ...
    'cors.headers' => \App\Http\Middleware\SetCorsHeaders::class,
];

但由於一些前端的 HTTP 請求套件，如 Axios，會在 DELETE 和 PATCH 等非簡單請求方法預先發出 OPTIONS 請求，此 OPTIONS 請求並不會進入 api 路由的生命週期，導致出現禁止訪問的錯誤訊息。因此需要將 SetCorsHeaders 中介層直接註冊在全域的 HTTP 中介層群組中。

1
2
3
4
protected $middleware = [
    // ...
    \App\Http\Middleware\SetCorsHeaders::class,
];

參考資料