摘要：合適和夠用是最完美的追求。比如從頁面去請求的資源。它允許瀏覽器向跨源服務器，發出請求，從而克服了只能同源使用的限制。定義在中的路由都是無狀態的，并且會應用中間件組。

程序開發人員，不拘泥于語言與技術，目前主要從事PHP和前端開發，使用Laravel和VueJs，App端使用Apicloud混合式開發。合適和夠用是最完美的追求。
個人網站：http://www.linganmin.cn
最近剛寫了一個手機在線播放的H5電影站：http://www.ifilm.ltd

laravel-cors的作用是用于解決瀏覽器跨域的問題

安裝

在終端執行安裝命令如下：

composer require barryvdh/laravel-cors

添加服務提供商

在Laravel配置文件app.php的providers數組中添加如下配置：

BarryvdhCorsServiceProvider::class,

發布配置文件

執行在終端執行發布配置文件命令如下：

php artisan vendor:publish --provider="BarryvdhCorsServiceProvider"

執行后會在laravel目錄下的config目錄中新增cors.php配置文件，如下圖

至此laravel-Cors安裝完成。

什么是跨域

跨域是指從一個域名的網頁去請求另一個域名的資源。比如從www.baidu.com 頁面去請求 www.google.com 的資源。跨域的嚴格一點的定義是：只要 協議，域名，端口有任何一個的不同，就被當作是跨域

為什么瀏覽器要限制跨域訪問

原因就是安全問題：如果一個網頁可以隨意地訪問另外一個網站的資源，那么就有可能在客戶完全不知情的情況下出現安全問題。

為什么要跨域

既然有安全問題，那為什么又要跨域呢？ 有時公司內部有多個不同的子域，比如一個是b.a.com ,而應用是放在c.a.com , 這時想從b.a.com去訪問 location.company.com 的資源就屬于跨域。

如何解決跨域問題

跨域訪問需要用到兩樣東東，一個是JSON，一種基于文本的傳輸協議；一種是JSONP，一群碼農想出來的跨域解決方案。

服務端需要做的

服務端要檢查訪問的請求參數，如果沒有callback，則可以按照之前的流程走；如果帶著callback參數，則需要將返回的結果包裝在callback里面。

客戶端（瀏覽器）需要做的

客戶端可以多種方式可以實現JSONP的調用

larave-cors做了什么

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
laravel-cors官方介紹入下：

The laravel-cors package allows you to send Cross-Origin Resource Sharing headers with ACL-style per-url configuration.

也就是說，laravel-cors是在服務端允許了所有帶有跨域資源請求的header，并當成正常請求處理，從服務端解決了跨域資源共享的問題。

關于更多的laravel-cors使用配置，請移步 larave-cors官方GitHub倉庫

要說遇到的坑，首先要介紹一下laravel處理的路由模式，官方文檔這樣說：

所有的 Laravel 路由都在 routes 目錄中的路由文件中定義，這些文件都由框架自動加載。 routes/web.php 文件中定義你的 web 頁面路由。這些路由都會應用 web 中間件組，其提供了諸如 Session 和 CSRF 保護等特性。定義在 routes/api.php 中的路由都是無狀態的，并且會應用 api 中間件組。

可以得到的信息如下：

laravel中有兩個默認路由配置，一個是routes目錄下的web.php，一個是routes目錄下的api.php；

web.php中定義的路由默認使用了Session 和 CSRF 保護等特性，所以可以直接使用會話技術，也就是正常的頁面請求處理是默認走的web.php中定義的路由或路由組

api.php的所有路由都是無狀態的，并且沒有使用Session 和 CSRF 保護的特性保護，所以里面定義的路由更適合為app提供接口，laravel默認當用戶的請求路由前綴為api時，laravel自動去調用api.php中所定義的路由或路由組。這是因為，在laravel的路由服務提供者中配置了路由前綴為api，下圖為路由服務提供者所在目錄路徑

下圖為無狀態路由組api.php的配置：

所以當url以類似www.xxx.com/api/route的請求時會自動調用api.php路由組所定義的路由

上面說到api.php中定義的路由為無狀態的，而且api.php中更適合提供api接口，所以為了解決跨域我們安裝了laravel-cors，而僅僅安裝還是不夠的，我們需要在會產生跨域的路由組中使用laravel-cors為我們提供的中間件，所以我們可以這樣使用laravel-cors

// 給需要跨域的路由增加cors中間件
Route::group(["middleware" => "cors"], function(Router $router){
    $router->get("api", "ApiController@index");
});

當我們整個api.php路由組全部需要跨域時，我們還可以在laravel框架的appHttpKernel.php文件中配置api.php路由組中增加cors中間件，如下：

/**
     * The application"s route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        "web" => [
            AppHttpMiddlewareEncryptCookies::class,
            IlluminateCookieMiddlewareAddQueuedCookiesToResponse::class,
            IlluminateSessionMiddlewareStartSession::class,
            IlluminateViewMiddlewareShareErrorsFromSession::class,
            AppHttpMiddlewareVerifyCsrfToken::class,
            IlluminateRoutingMiddlewareSubstituteBindings::class,
        ],

        "api" => [
            "throttle:60,1",
            "bindings",
            "cors"http:// install laravel-cros 增加cors中間件，解決跨域問題
        ],
    ];

注意，如果安裝laravel-cors之后還是出現跨域問題，一定一定不要忘記檢查一下是否增加了cors中間件

具體的表單驗證請查看官方給出的文檔（laravel的中文文檔像laravel框架一樣優雅），附上 laravel表單驗證中文文檔地址

下面很重要

想說的是當ajax請求時，如果表單驗證失敗，則會產生一次重定向，然后傳回一個 HTTP 響應，其中包含了 422 狀態碼和驗證錯誤的 JSON 數據，但是我們在客戶端看到的卻有可能是一個關于ajax跨域的錯誤，這是因為我們在使用jquery或者其他JavaScript包的ajax請求方法請求時，沒有指定返回的數據類型為json，而laravel的錯誤處理默認解析為普通web請求，laravel表單驗證規則上面也說到了，當驗證失敗，會產生一次重定向，而我們會看到的卻是一個關于跨域的報錯，下面是一個例子：

在api.php路由組中定義了登錄路由如下

    // 登錄路由，使用依賴注入請求驗證
    Route::post("login", function (AppHttpRequestsLoginRequest $request) {  
        // 獲取到通過請求的兩個字段
        $checkInfo = IlluminateSupportFacadesInput::only("mobile", "password");
        try {
            // 為該用戶驗證，驗證通過則生成token，失敗返回錯誤提示
            if (!$token = JWTAuth::attempt($checkInfo)) {
                return Response::json(["error" => "賬號或密碼錯誤"], 401);
            }
            return [
                "user"=>JWTAuth::toUser($token),
                "token"=>$token
            ];
        } catch (TymonJWTAuthExceptionsJWTException $e) {
            // 返回捕獲的異常
            return Response::json($e->getMessage(), 500);
        }
    });

在api.php路由組中使用的表單驗證類AppHttpRequestsLoginRequest定義如下

在用戶模型中定義的驗證規則和驗證提示如下

    public static $rules = [
        "mobile"=>"required",
        "password"=>"required"
    ];

    public static $messages = [
        "mobile.required"=>"手機號不能為空",
        "password.required"=>"密碼不能為空"
    ];
使用jquery的post請求發送ajax請求

$.post("http://192.168.1.6:9999/api/login",{},function(data){
    console.log(data)
});
因為該post請求并未傳遞任何參數，所以驗證可能是未通過，但我們看到的確實一個關于跨域失敗的報錯，如下圖

產生這個報錯是因為我們在發送post請求時沒有指定期望返回的數據類型，而laravel框架就將其判斷為一個普通的web請求，并返回302跳轉到發送請求的頁面，在這個過程中產生了跨域，如下圖

所以當我們在發送ajax請求時，指定期望的返回類型時，就可以看到laravel為我們返回的422的驗證失敗的報錯了，代碼和效果如下圖：

對應報錯返回的json數據如下圖:


所以，在請求laravel的接口時一定要指定期望的返回數據類型

安小下同學