關于作者

程序開發人員，不拘泥于語言與技術，目前主要從事PHP和前端開發，使用Laravel和VueJs，App端使用Apicloud混合式開發。合適和夠用是最完美的追求。

個人網站：http://www.linganmin.cn

最近剛寫了一個手機在線播放的H5電影站：http://www.ifilm.ltd

日常填坑手記

關于Larave擴展laravel-cors使用的

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

安裝

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

composer require barryvdh/laravel-cors

添加服務提供商

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

Barryvdh\Cors\ServiceProvider::class,

發布配置文件

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

php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

執行后會在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' => [\App\Http\Middleware\EncryptCookies::class,\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,\Illuminate\Session\Middleware\StartSession::class,\Illuminate\View\Middleware\ShareErrorsFromSession::class,\App\Http\Middleware\VerifyCsrfToken::class,\Illuminate\Routing\Middleware\SubstituteBindings::class,],'api' => ['throttle:60,1','bindings','cors'// install laravel-cros 增加cors中間件，解決跨域問題],];

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

說說laravel的表單驗證

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

下面很重要

---

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

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

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

• 在api.php路由組中使用的表單驗證類\App\Http\Requests\LoginRequest定義如下

<?phpnamespace App\Http\Requests;use App\User; use Illuminate\Foundation\Http\FormRequest;class LoginRequest extends FormRequest {/*** Determine if the user is authorized to make this request.** @return bool*/public function authorize(){return true;}/*** Get the validation rules that apply to the request.** @return array*/public function rules(){// 調用了模型靜態屬性定義好的驗證規則return User::$rules;}public function messages(){// 調用了模型靜態屬性定義好的驗證規則提示return User::$messages;} }

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

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的接口時一定要指定期望的返回數據類型

---

安小下同學

總結

以上是生活随笔為你收集整理的【日常填坑】之ajax请求laravel的api接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。