【平常填坑】之ajax请求laravel的api接口

关于做者

程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。

我的网站：http://www.linganmin.cn

最近刚写了一个手机在线播放的H5电影站：http://www.ifilm.ltd

平常填坑手记

关于Larave扩展laravel-cors使用的

laravel-cors的做用是用于解决浏览器跨域的问题

1. 安装

在终端执行安装命令以下：

composer require barryvdh/laravel-cors

1. 添加服务提供商

在Laravel配置文件app.php的providers数组中添加以下配置：

Barryvdh\Cors\ServiceProvider::class,

1. 发布配置文件

执行在终端执行发布配置文件命令以下：

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 中间件组。

能够获得的信息以下：

1. laravel中有两个默认路由配置，一个是routes目录下的web.php，一个是routes目录下的api.php；

2. web.php中定义的路由默认使用了Session 和 CSRF 保护等特性，因此能够直接使用会话技术，也就是正常的页面请求处理是默认走的web.php中定义的路由或路由组

3. 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定义以下

<?php

namespace 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的接口时必定要指按期望的返回数据类型

---

安小下同窗