专栏首页前端博客:https://alili.tech关于Laravel下Cors跨域POST请求的一种实现方法

抱歉,你查看的文章已删除

关于Laravel下Cors跨域POST请求的一种实现方法

之前做了一个公司的内部管理系统,现在希望通过在钉钉上开发一个小应用查看相关数据,在此过程中涉及了HTTP的跨域请求的问题,在了解相关信息后,打算基于CORS实现。关于CORS(跨域资源共享),见这篇文章。 CORS中,对于简单请求,只需在服务器进行相关的字段验证后进行响应即可,主要是验证请求的来源及请求的方法等是否是服务器许可的。 而对于复杂请求,则浏览器会先发送一个options请求到服务器进行验证,验证通过后,再发送用户的请求。再options请求中,服务器会返回允许的请求源、请求方法及头部字段等。

对于CORS在Laravel中的实现需要在项目中加入一个中间件Cors,

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        

        header("Access-Control-Allow-Origin: *");

        $headers = [
            'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
        ];

        $response = $next($request);
        foreach($headers as $key => $value) 
            $response->header($key, $value);
        return $response;
    }
}

对于简单请求,比如get请求,在路由中加入该中间件即可。 但对于复杂请求,则处理不了。(根据文档,POST请求满足某些条件是才是复杂请求,但不知道为何,我发出的POST请求都是复杂请求,即浏览器首先会触发一次options请求,再提交客户的实际请求)。 对于只是采取与简单请求相同的方法,则对于复杂请求无法正确响应。

以下是GET请求的请求-响应信息:

以下是POST请求的响应:

可见POST请求中,浏览器先进行了OPTIONS请求,但该请求的响应中,并没有GET响应中的

Access-Control-Allow-Headers:Content-Type, X-Auth-Token, Origin
Access-Control-Allow-Methods:POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin:*

等跨域控制字段。

通过查询资料,Laravel对于OPTIONS请求会自动常规响应200。所以缺少必要的头部信息。 所以,我通过在路由中专门加入一个处理options的路由

Route::options('cors/test',function(){
    return response('ok')
                         ->header('Access-Control-Allow-Methods','POST, GET, OPTIONS, PUT, DELETE')
                         ->header('Access-Control-Allow-Headers','Content-Type, X-Auth-Token, Origin');
})->middleware('cors');

即保证了OPTIONS响应了必要的头部信息。 但该方法需要关闭Laravel中相应路由的CSRF功能,具体在AppHttpMiddlewareVerifyCsrfToken添加

protected $except = [
        'cors/*'
    ];

虽然解决了问题,但对于其中的很多细节还是不了解,需要进一步学习。

版权声明

本文资源来源互联网,仅供学习研究使用,版权归该资源的合法拥有者所有,

本文仅用于学习、研究和交流目的。转载请注明出处、完整链接以及原作者。

原作者若认为本站侵犯了您的版权,请联系我们,我们会立即删除!

原文标题

关于Laravel下Cors跨域POST请求的一种实现方法

原文链接

https://segmentfault.com/a/1190000008736168

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 揭秘简单请求与复杂请求

    开发网站时经常会用到跨域资源共享(简称cors,后面使用简称)来解决跨域问题,但是在使用cors的时候,http请求会被划分为两类,简单请求和复杂请求,而这两种...

    挥刀北上
  • 从http规范角度来看xmlhttprequest发送请求

    最近有点怠工,停更好久,今天分享一篇小白文,原生ajax,看标题肯定不同于其他文章的ajax,而是从http规范角度来看xmlhttprequest发送请求。

    挥刀北上
  • Http基础解析

    ** 概念**:Hyper Text Transfer Protocol 超文本传输协议 * 传输协议:定义了,客户端和服务器端通信时,发送数据的格式 * ...

    一只胡说八道的猴子
  • axios发送两次请求及遇到的坑

    在以前的Vue项目商城中,使用axios组件做数据请求,在页面交互中发现会发送两次网络请求,因为没有造成什么影响,一直也没有追究原因。在一个新的项目中,需要加入...

    honey缘木鱼
  • Provisional headers are shown in Chrome network tab

    细心的同学应该留意到,新版开发者工具的 Network 面板中,某些请求头后面会跟着下面这行文字:

    Jerry Wang
  • 测试工具Fiddler(三)—— 常见功能介绍

    3、autoresponder: 文件代理:可以使用fiddler来自定义请求返回的文件。

    小菠萝测试笔记
  • 常见HTTP状态码 转

    成功的状态码(基本以2开头):这一类型的状态码,代表请求已成功被服务器接收、理解、并接受

    双面人

扫码关注云+社区

领取腾讯云代金券