vue中axios发送OPTIONS预检请求的原因及如何通过

野性酷女 2022-04-16 05:00 2274阅读 0赞

### 什么是OPTIONS请求 ###

HTTP 的 OPTIONS 方法 用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法。  
实际上，出于安全考虑，并不是所有域名访问后端服务都可以。`其实在正式跨域之前，浏览器会根据需要发起一次预检（也就是option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源或者域），还有是否需要Credentials(认证信息)等。`

### 浏览器在什么情况下发送预检请求 ###

##### 1.为什么会发送预检请求 #####

问题的根源,在于,我们发出去的请求,不是"simple request", 那么在每次发送之前,都要自动发出一个option请求.  
因为： 浏览器将CORS请求分为两类：简单请求（simple request）和非简单请求（not-simple-request）,简单请求浏览器不会预检，而非简单请求会预检。  
对于简单请求，浏览器直接请求，会在请求头信息中，增加一个origin字段，来说明本次请求来自哪个源（协议+域名+端口）。服务器根据这个值，来决定是否同意该请求，服务器返回的响应会多几个头信息字段。

1.Access-Control-Allow-Origin：该字段是必须的，* 表示接受任意域名的请求，还可以指定域名
    
    2.Access-Control-Allow-Credentials：该字段可选，是个布尔值，表示是否可以携带cookie，
    （注意：如果Access-Control-Allow-Origin字段设置*，此字段设为true无效）
    
    3.Access-Control-Allow-Headers：该字段可选，里面可以获取Cache-Control、Content-Type、Expires等，
      如果想要拿到其他字段，就可以在这个字段中指定。比如图中指定的GUAZISSO

##### 2.简单请求的规则及如何排查 #####

1.请求方式只能是：GET、POST、HEAD
    
    2.HTTP请求头限制这几种字段：Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID
    
    3.Content-type只能取：application/x-www-form-urlencoded、multipart/form-data、text/plain

所以，如果你的请求出现了预检请求，请检查这几项。  
具体可自己查阅一下：[什么是simple request][simple request]

### 解决预检请求不通过 ###

正常的我们尽量发送`simple request`,避免预检请求出现，不过真的发送预检请求了，除了通过上面的匹配简单请求规则来避免，也可以伪造通过预检请求。  
在这里以`Yii2`子二个小例子：

//获取请求方式，筛选OPTIONS请求，返回204状态码，告诉客户端预检通过
     $method = Yii::$app->request->method;
     if($method == 'OPTIONS'){ 
         header("HTTP/1.1 204 OK");die;
     }

为什么这里返回204状态码，是因为204状态码不会让浏览器产生更新操作，这里只是为了通过预检请求。当然200也是可以的。  
我贴两个图看一下预检请求和预检通过后的post请求的信息：  
**预检请求：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70]

**预检后POST请求**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70 1]

[simple request]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70]: /images/20220416/9b1354dea40146d0b4e5defcb4439abf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70 1]: /images/20220416/c670768989414b5e834dc53062d930af.png