【日常填坑】之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的接口时一定要指定期望的返回数据类型

安小下同学

【日常填坑】之ajax请求laravel的api接口的更多相关文章

  1. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码，需要的朋友参考下吧

  2. 利用Node实现HTML5离线存储的方法

    这篇文章主要介绍了利用Node实现HTML5离线存储的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  3. 详解如何通过H5（浏览器/WebView/其他）唤起本地app

    这篇文章主要介绍了详解如何通过H5（浏览器/WebView/其他）唤起本地app的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  4. H5混合开发app如何升级的方法

    本篇文章主要介绍了H5混合开发app如何升级的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  5. AmazeUI 折叠面板的实现代码

    这篇文章主要介绍了AmazeUI 折叠面板的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. HTML5之消息通知的使用(Web Notification)

    通知可以说是web中比较常见且重要的功能，私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈。本篇文章主要介绍了HTML5之消息通知的使用(Web Notification)，感兴趣的小伙伴们可以参考一下

  7. HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码

    这篇文章主要介绍了HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧

  8. Html5 video标签视频的最佳实践

    这篇文章主要介绍了Html5 video标签视频的最佳实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  9. html5唤起app的方法

    这篇文章主要介绍了html5唤起app的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拍照和摄像机功能实战详解

    这篇文章主要介绍了HTML5拍照和摄像机功能实战详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部