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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gu_wen_jie/article/details/84172410

什么是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,避免预检请求出现,不过真的发送预检请求了,除了通过上面的匹配简单请求规则来避免,也可以伪造通过预检请求。
在这里以Yii2子二个小例子:

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

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

预检后POST请求
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页