Laravel前後端分離-跨域問題

現在的項目大多采用前後端分離的開發方式，前端在開發完成後，需要部署在一個特定的端口上，而前端又需要調用後端接口，由於瀏覽器的同源策略，肯定是繞不開跨域問題滴

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說 Web 是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。

它的核心就在於它認爲自任何站點裝載的信賴內容是不安全的。當被瀏覽器半信半疑的腳本運行在沙箱時，它們應該只被允許訪問來自同一站點的資源，而不是那些來自其它站點可能懷有惡意的資源。

簡單的說，就是在用戶訪問當前的網頁時，不可以調用其他不同域名不同端口的資源

本文從後端下手，輕鬆解決跨域問題

1. 新建一箇中間件

php artisan make:middleware OpenCrossHttp

2. 編輯中間件

    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $origin = $request->server('HTTP_ORIGIN') ? $request->server('HTTP_ORIGIN') : '';
        $allow_origin = [
            'http://localhost:8090',<-需要跨域的白名單
        ];
        if (in_array($origin, $allow_origin)) {
            $response->header('Access-Control-Allow-Origin', $origin);
            $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, X-CSRF-TOKEN, Accept, Authorization, X-XSRF-TOKEN');
            $response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
            $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
            $response->header('Access-Control-Allow-Credentials', 'true');
        }
        return $response;
    }

有一點想要說明一下，$allow_origin的跨域名單爲所啓動的前端網頁的域名或IP+port形式

3. 將中間件註冊到Kernel中

# app/Http/Kernel.php  
	protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \App\Http\Middleware\OpenCrossHttp::class,<-這是新增的
    ];

這是對於整個Laravel項目都是接口而言，在$middleware的$middleware中進行註冊後，使得框架啓動時自動對所有請求執行這個中間件

現在使用前端訪問試試吧

odek！妥妥的，以後媽媽再也不用擔心我學習敲代碼了，對於後邊新增的接口也不需要進行配置了