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

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

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

<?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响应中的cors

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的路由spa

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添加code

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

虽然解决了问题,但对于其中的不少细节仍是不了解,须要进一步学习。htm

相关文章
相关标签/搜索