Laravel解决预请求和跨域的问题

Posted 2020-12-03 努力的九月

场景描述

　　最近在做公司的一个项目，我们在做这个小项目的时候，决定采用三端分离，数据库、服务器端、前端都分离。这样的分离是好的，但是我们遇到了一个问题，这个问题就是跨域问题和预请求问题。跨域的问题是因为我们将前端和后端放在两台服务器，数据之间的访问是通过RestApi进行的，这个时候的访问就涉及跨域的问题。还有一个问题就是预请求的问题，这个问题的引发就是在访问Api的时候要携带令牌，没有令牌是不能访问的。前端每次在访问接口的时候都要在请求头加上Token，加上token之后就出现了预请求的问题。为了解决预请求太搞脑子。下面我们就来说说预请求的问题。

CORS描述

一、CORS定义

　　跨来源资源共享（CORS）是一份浏览器技术的规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest，这种方式的错误处理比JSONP要来的好，JSONP对于 RESTful 的 API 来说，发送 POST/PUT/DELET 请求将成为问题，不利于接口的统一。但另一方面，JSONP 可以在不支持 CORS 的老旧浏览器上运作。不过现代的浏览器（IE10以上）基本都支持 CORS。

二、简单请求和非简单请求

　　只要同时满足以下两大条件，就属于简单请求。否侧就是非简单请求。

（1) 请求方法是以下三种方法之一：

       HEAD
       GET
       POST
（2）HTTP的头信息不超出以下几种字段：

      Accept
      Accept-Language
      Content-Language
      Last-Event-ID
      Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json或者自定义请求头信息。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

非简单请求两个重要的参数：

　　1、Access-Control-Request-Method：该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法。

　　2、Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段。

三、预检请求定义

　　在 CORS 中，可以使用 OPTIONS 方法发起一个预检请求(一般都是浏览检测到请求跨域时，会自动发起)，以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法；Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。

预检请求的过程　

　　

由上面图可以看出，解决预请求是靠服务器来解决。

请求失败的结果：如果失败请求头的Token就不能加上去

请求成功的结果

laravel怎么实现OPTIONS请求

　　我在网上找了好多资料，看了之后都不能解决预检测的问题，因为项目的需要，需要在所有的Api接口的访问携带Token，这个时候我们注册中间件就要注册全局的，而不是路由的。

注意：我第一次在路由里面直接注册中间件，还是不能成功响应。通过调试发现Laravel预检测不能放在路由的中间件里面，如果放在哪就不生效。我们要放在全局中间件里面或者直接放在路由里面。

见代码

public function handle($request, Closure $next)
    {
        $response = $next($request);
        $response->header(\'Access-Control-Allow-Origin\', \'*\');
        $response->header(\'Access-Control-Allow-Headers\', \'Origin,No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With, token\');
        $response->header(\'Access-Control-Allow-Methods\', \'GET, POST, PATCH, PUT, OPTIONS\');
        $response->header(\'Access-Control-Allow-Credentials\', \'true\');
        //验证token是否
        $token = $request->header(\'token\');
        if(!$token){
            return Base::response(\'授权失败，请检查token\',0);
        }else{
            $res = (new Token())->verifyToken($token);
            if(!$res){
                return Base::response(\'token失效，请重新获取\',0);
            }
        }
        return $response;
    }

注册中间件

  protected $middleware = [
        \\Illuminate\\Foundation\\Http\\Middleware\\CheckForMaintenanceMode::class,
        \\Illuminate\\Foundation\\Http\\Middleware\\ValidatePostSize::class,
        \\App\\Http\\Middleware\\TrimStrings::class,
        \\Illuminate\\Foundation\\Http\\Middleware\\ConvertEmptyStringsToNull::class,
        \\App\\Http\\Middleware\\CorsHttp::class,
    ];

最后大功告成，希望可以帮助到大家。