为啥axios请求接口会发起两次请求

Posted 2023-03-18

如果只是普通的 ajax 请求，也不会发起这个请求，只有当 ajax 请求绑定了 upload 的事件并且跨域的时候，就会自动发起这个请求。
这样就明了了，就是我们有upload事件绑定（一般都是本地调试，所以会有跨域），我仔细看了下axios文档，发现config配置文件中有两个参数
// onUploadProgress: function(progressEvent)
// // Do whatever you want with the native progress event
// ,
// onDownloadProgress: function(progressEvent)
// // Do whatever you want with the native progress event
// ,
分别处理上传和下载事件，也就是这里绑定了upload事件，所以每次请求都会有个option请求。
解决方案很简单，直接注释掉就好了，当然如果开发的工程上线使用跟请求的接口是同一个域名下自然不会两次请求。 参考技术A

因为vue-resource不在更新，vue推荐使用axios，所以使用axios。 
在页面交互过程中，发现axios一定几率会发送两次请求，一次是自己设置的请求方式，还有一次是options。 
关于这个问题，在各个网站寻求原因，得出以下结论： 
跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。 
也就是说，它会先使用options去测试，你这个接口是否能够正常通讯，如果不能就不会发送真正的请求过来，如果测试通讯正常，则开始正常请求。 
关于这个问题，需要在后台进行设置，允许options请求，不然你的请求就会受到影响，后台并作出判断，如果请求方式为options，告诉它可以通讯，其他直接什么都不做。 
以下是php做设置内容 

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;