axiso请求为什么出现OPTION

225 阅读1分钟

在使用axios开发中,打开调试器我们会发现,明明只发起一次请求,为什么会有三条请求记录呢?

image.png 打开一看,请求方式显示的是OPTION

image.png

为什么会出现OPTION请求?

首先我们先了解一下浏览器中的CORS跨域和限制跨域请求的方式

浏览器将CORS跨域分为 简单跨域请求和复杂跨域请求
简单跨域请求要同时满足以下两种条件,不满足则为复杂跨域请求
- post\get\head
- AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type(仅限于application/x-www-form-urlencoded、multipart/form-data、text/plain)
浏览器限制跨域请求的两种情况(一般是第二种情况)
- 限制发起跨域请求
- 跨域请求可以正常发起,但是返回的结果会被浏览器拦截

为了避免请求已经到达服务器并响应了某些操作,改变了数据库数据,但是返回的结果会被浏览器拦截,用户就不能取到相应的结果进行后续的操作,浏览器就会通过OPTIONS方法对请求进行预检,通过询问服务器是否允许这次请求,允许之后,服务器才会响应真实请求,否则就阻止真实请求。

因此,一般情况下,简单跨域不会发送options请求,复杂跨域会触发预检请求options。

如何取消预检请求OPTION?

  1. 后端在请求的返回头部添加:Access-Control-Max-Age:(number)
  2. 修改请求方法
  3. 去除自定义header
  4. 修改Content-Type的值