Laravel 瀏覽器跨域

left發表於2019-01-24
Laravel瀏覽器跨域

在前後端分離的 Laravel 專案中, 客戶端程式程式和伺服器程式碼在不同域名或是不同埠執行下時, 會涉及跨域問題, 由於瀏覽器的同源策略，跨域請求非法, 這裡可能需要做一些設定

同源策略是Web應用程式安全模型中的一個重要概念。根據該策略，Web瀏覽器允許第一個Web頁面中包含的指令碼訪問第二個Web頁面中的資料，但前提是兩個Web頁面具有相同的源。原點定義為URI方案，主機名和埠號的組合。此策略可防止一個頁面上的惡意指令碼通過該頁面的文件物件模型訪問另一個網頁上的敏感資料。

方案一: laravel-Cors

偷懶的話, composer 拉個包就行, 在終端執行安裝命令如下：

composer require barryvdh/laravel-cors

具體教程移步: github: laravel-Cors

方案二: 中介軟體

通常, 跨域時, 幾個 header 頭預設會有限制策略, 這裡在每個 http 請求時, 都過濾一遍即可. 由於 laravel 的請求可以設定必須經由某個中介軟體, 所以這裡寫一箇中介軟體即可.

  1. 新建一箇中介軟體

php artisan make:middleware CrossMiddleware

  1. 中介軟體邏輯
namespace App\Http\Middleware;
use Closure;

class CrossMiddleware
{
    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, multipart/form-data, application/json');
//        $response->header('Access-Control-Allow-Headers', '*');
        $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS, DELETE');
        $response->header('Access-Control-Allow-Credentials', 'false');

        return $response;
    }
}

這裡介紹以下每個引數的意義:

選項 描述 引數
Access-Control-Allow-Origin 設定可請求的域名 Text
Access-Control-Allow-Headers 請求頭引數, 如果有自定義的請求頭, 切記要加上 Origin, Content-Type, Cookie, Accept, multipart/form-data, application/json
Access-Control-Allow-Methods 允許的方法 GET, POST, PATCH, PUT, OPTIONS, DELETE
Access-Control-Allow-Credentials cookie 相關 true, false
  1. 註冊該中介軟體

在 App\Http\Kernel 類的 $middleware 中新增全域性中介軟體

class Kernel extends HttpKernel
{
    protected $middleware = [
        // ...
        \App\Http\Middleware\CrossMiddleware::class,//跨域
    ];

之後跨域就被許可了, 但是請求過程中, 會多傳送一個 options 方法的請求, 判斷伺服器是否允許跨域操作.

以上~

相關文章