摘要：合適和夠用是最完美的追求。比如從頁(yè)面去請(qǐng)求的資源。它允許瀏覽器向跨源服務(wù)器，發(fā)出請(qǐng)求，從而克服了只能同源使用的限制。定義在中的路由都是無(wú)狀態(tài)的，并且會(huì)應(yīng)用中間件組。

程序開(kāi)發(fā)人員，不拘泥于語(yǔ)言與技術(shù)，目前主要從事PHP和前端開(kāi)發(fā)，使用Laravel和VueJs，App端使用Apicloud混合式開(kāi)發(fā)。合適和夠用是最完美的追求。
個(gè)人網(wǎng)站：http://www.linganmin.cn
最近剛寫(xiě)了一個(gè)手機(jī)在線播放的H5電影站：http://www.ifilm.ltd

laravel-cors的作用是用于解決瀏覽器跨域的問(wèn)題

安裝

在終端執(zhí)行安裝命令如下：

composer require barryvdh/laravel-cors

添加服務(wù)提供商

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

BarryvdhCorsServiceProvider::class,

發(fā)布配置文件

執(zhí)行在終端執(zhí)行發(fā)布配置文件命令如下：

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

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

至此laravel-Cors安裝完成。

什么是跨域

跨域是指從一個(gè)域名的網(wǎng)頁(yè)去請(qǐng)求另一個(gè)域名的資源。比如從www.baidu.com 頁(yè)面去請(qǐng)求 www.google.com 的資源?？缬虻膰?yán)格一點(diǎn)的定義是：只要 協(xié)議，域名，端口有任何一個(gè)的不同，就被當(dāng)作是跨域

為什么瀏覽器要限制跨域訪問(wèn)

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

為什么要跨域

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

如何解決跨域問(wèn)題

跨域訪問(wèn)需要用到兩樣?xùn)|東，一個(gè)是JSON，一種基于文本的傳輸協(xié)議；一種是JSONP，一群碼農(nóng)想出來(lái)的跨域解決方案。

服務(wù)端需要做的

服務(wù)端要檢查訪問(wèn)的請(qǐng)求參數(shù)，如果沒(méi)有callback，則可以按照之前的流程走；如果帶著callback參數(shù)，則需要將返回的結(jié)果包裝在callback里面。

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

客戶端可以多種方式可以實(shí)現(xiàn)JSONP的調(diào)用

larave-cors做了什么

CORS是一個(gè)W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制。
laravel-cors官方介紹入下：

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

也就是說(shuō)，laravel-cors是在服務(wù)端允許了所有帶有跨域資源請(qǐng)求的header，并當(dāng)成正常請(qǐng)求處理，從服務(wù)端解決了跨域資源共享的問(wèn)題。

關(guān)于更多的laravel-cors使用配置，請(qǐng)移步 larave-cors官方GitHub倉(cāng)庫(kù)

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

所有的 Laravel 路由都在 routes 目錄中的路由文件中定義，這些文件都由框架自動(dòng)加載。 routes/web.php 文件中定義你的 web 頁(yè)面路由。這些路由都會(huì)應(yīng)用 web 中間件組，其提供了諸如 Session 和 CSRF 保護(hù)等特性。定義在 routes/api.php 中的路由都是無(wú)狀態(tài)的，并且會(huì)應(yīng)用 api 中間件組。

可以得到的信息如下：

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

web.php中定義的路由默認(rèn)使用了Session 和 CSRF 保護(hù)等特性，所以可以直接使用會(huì)話技術(shù)，也就是正常的頁(yè)面請(qǐng)求處理是默認(rèn)走的web.php中定義的路由或路由組

api.php的所有路由都是無(wú)狀態(tài)的，并且沒(méi)有使用Session 和 CSRF 保護(hù)的特性保護(hù)，所以里面定義的路由更適合為app提供接口，laravel默認(rèn)當(dāng)用戶的請(qǐng)求路由前綴為api時(shí)，laravel自動(dòng)去調(diào)用api.php中所定義的路由或路由組。這是因?yàn)?，在laravel的路由服務(wù)提供者中配置了路由前綴為api，下圖為路由服務(wù)提供者所在目錄路徑

下圖為無(wú)狀態(tài)路由組api.php的配置：

所以當(dāng)url以類似www.xxx.com/api/route的請(qǐng)求時(shí)會(huì)自動(dòng)調(diào)用api.php路由組所定義的路由

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

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

當(dāng)我們整個(gè)api.php路由組全部需要跨域時(shí)，我們還可以在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中間件，解決跨域問(wèn)題
        ],
    ];

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

具體的表單驗(yàn)證請(qǐng)查看官方給出的文檔（laravel的中文文檔像laravel框架一樣優(yōu)雅），附上 laravel表單驗(yàn)證中文文檔地址

下面很重要

想說(shuō)的是當(dāng)ajax請(qǐng)求時(shí)，如果表單驗(yàn)證失敗，則會(huì)產(chǎn)生一次重定向，然后傳回一個(gè) HTTP 響應(yīng)，其中包含了 422 狀態(tài)碼和驗(yàn)證錯(cuò)誤的 JSON 數(shù)據(jù)，但是我們?cè)诳蛻舳丝吹降膮s有可能是一個(gè)關(guān)于ajax跨域的錯(cuò)誤，這是因?yàn)槲覀冊(cè)谑褂胘query或者其他JavaScript包的ajax請(qǐng)求方法請(qǐng)求時(shí)，沒(méi)有指定返回的數(shù)據(jù)類型為json，而laravel的錯(cuò)誤處理默認(rèn)解析為普通web請(qǐng)求，laravel表單驗(yàn)證規(guī)則上面也說(shuō)到了，當(dāng)驗(yàn)證失敗，會(huì)產(chǎn)生一次重定向，而我們會(huì)看到的卻是一個(gè)關(guān)于跨域的報(bào)錯(cuò)，下面是一個(gè)例子：

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

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

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

在用戶模型中定義的驗(yàn)證規(guī)則和驗(yàn)證提示如下

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

    public static $messages = [
        "mobile.required"=>"手機(jī)號(hào)不能為空",
        "password.required"=>"密碼不能為空"
    ];
使用jquery的post請(qǐng)求發(fā)送ajax請(qǐng)求

$.post("http://192.168.1.6:9999/api/login",{},function(data){
    console.log(data)
});
因?yàn)樵損ost請(qǐng)求并未傳遞任何參數(shù)，所以驗(yàn)證可能是未通過(guò)，但我們看到的確實(shí)一個(gè)關(guān)于跨域失敗的報(bào)錯(cuò)，如下圖

產(chǎn)生這個(gè)報(bào)錯(cuò)是因?yàn)槲覀冊(cè)诎l(fā)送post請(qǐng)求時(shí)沒(méi)有指定期望返回的數(shù)據(jù)類型，而laravel框架就將其判斷為一個(gè)普通的web請(qǐng)求，并返回302跳轉(zhuǎn)到發(fā)送請(qǐng)求的頁(yè)面，在這個(gè)過(guò)程中產(chǎn)生了跨域，如下圖

所以當(dāng)我們?cè)诎l(fā)送ajax請(qǐng)求時(shí)，指定期望的返回類型時(shí)，就可以看到laravel為我們返回的422的驗(yàn)證失敗的報(bào)錯(cuò)了，代碼和效果如下圖：

對(duì)應(yīng)報(bào)錯(cuò)返回的json數(shù)據(jù)如下圖:


所以，在請(qǐng)求laravel的接口時(shí)一定要指定期望的返回?cái)?shù)據(jù)類型

安小下同學(xué)