解决axios发送OPTIONS预检请求及数据格式转换方案

axios发送两次请求的原因分析

问题描述：

在Vue开发中，axios是常用的数据交互库，其默认设置的请求头Content-Type为application/json。

采用该默认请求头配置时，可能会观察到向服务器发送两次请求的现象。

造成这一现象的原因如下：

当请求包含非简单方法（如POST）或特定Content-Type时，浏览器会先发送一个OPTIONS方法的预检请求（Preflight Request），用于验证服务器是否允许该跨域请求。若预检通过，浏览器才会发送实际的HTTP请求；若预检失败，则不会发送真实请求。

其交互逻辑大致如下：

浏览器询问服务器是否允许特定请求，服务器返回允许后，浏览器发送实际的GET或POST请求；若服务器拒绝，则前端报错。

这种机制导致每个符合条件的请求都会产生两次网络交互，增加了服务器的负载。虽然常见的解决方案是配置服务器允许OPTIONS请求，但这仅解决了跨域验证问题，并未消除预检请求本身，服务器仍需处理额外的OPTIONS请求。

如何解决这个问题？不允许浏览器请求，只发送真正的请求，我也没解决，如果有已经解决的朋友可以告诉我解决方法~(￣3￣)~

不过，

存在一种替代性的处理思路。

可以在main.js文件中，将axios的默认请求头Content-Type修改为application/x-www-form-urlencoded。

通过修改请求头规避预检请求

然而，新的问题随之产生：

后端接口可能无法直接识别这种数据格式。

因此，在发送请求前，必须对传递的数据进行格式转换。

此时，可以借助qs模块来完成数据序列化工作。

使用qs模块转换数据格式

首先执行 npm install qs 安装该模块。

接着在main.js中进行配置：

引入qs模块。

import qs from 'qs

将qs挂载到Vue原型上，以便全局调用。

Vue.prototype.$qs = qs

通过上述配置，在发起axios POST请求时，利用qs将数据转换为后端可识别的表单格式，从而避免复杂的预检流程。

this.$axios
   .post("http://xxx/", 
    this.$qs.stringify(postData)
   ).then(data => {
    if (data.data.status != 200) {
     //xxx
    } else {
     //xxx
    }
   });

总结

以上介绍了处理axios发送两次请求及OPTIONS预检请求的相关方法与数据格式转换技巧，希望能为读者提供有益参考。如有任何疑问，欢迎留言交流，小编将及时回复。感谢大家的支持！