Axios 执行post发送两次请求的小坑

时间：2023-12-31 14:39:44

vue-resource2.0已经不再更新，所以vue2.0官方推荐使用axios来代替。
实际项目也是应用上了vue+axios，然后就有了这么一段填坑的经历。

问题：axios使用post请求时，发送了两次，而get则正常。
第一次请求不是正确的post请求，第二次才是正确的

调出谷歌开发者工具

Axios 执行post发送两次请求的小坑
image.png

“Request Method： OPTIONS”
什么鬼，post请求时，这里的“Request Method”居然不是post，而是这个OPTIONS。注意：它还是额外发送的。

项目中采用前后端分离的开发方式，前端通过调用后端API实现数据传输。
后端同学则通过反向代理解决了前端跨域的问题。（前端调接口跟在同域下使用时一样，该怎么用怎么用）

找到原因：其实这个情况并非bug，而是当项目中有用到跨域请求时，除了get方式的http请求，都会发送一个预检请求。

跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。
相关资料https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_C

解决方案：只能麻烦后端同学帮忙处理下

header("Access-Control-Allow-Origin:*");

header("Access-Control-Allow-Headers:content-type");

header("Access-Control-Request-Method:GET,POST");

if(strtoupper($_SERVER['REQUEST_METHOD'])== 'OPTIONS'){

  exit;

}

后端遇到请求方式是“Request Method： OPTIONS” 时，直接返回或退出即可，不再往下执行程序。
上述header的设置用的是PHP的设置方法，在Web服务器端，如nginx, apache也可以对header进行设定。

相关文章