vue开发中axios提交两个post，第一次是OPTIONS

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

记录一下这次遇到的问题。

浏览器会首先使用 OPTIONS 方法发起一个预请求，判断接口是否能够正常通讯，

· 如果接口的服务端不允许跨域，就直接挂掉。

· 如果测试通讯正常，则开始真正的请求。

所以经常看见两次请求，第一次是OPTIONS，第二次才是POST。

如果上线以后，还是跨域的话，就比较恶心了，即使服务后端支持跨区，也无形中增加了很多负担。

第一种：

设置axios的Content-Type：

axios.defaults.headers[‘Content-Type’] = ‘application/x-www-form-urlencoded’

可是还是有问题，提交的数据格式如下：

如果后端程序不能识别，还是有问题。

第二种：

引入 qs 模块
npm install qs --save

在axios需要发送数据的地方引入（我将axios封装成了一个模块 @/common/js/request.js）

因此，我在该模块中引入 qs
import qs from 'qs'

然后定义一下默认的 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

最后，在request拦截器里面判断一下，如果是当前请求是post，就执行qs.stringify()

这样一来，在跨域的情况下发送出去的就是一个常规的 URLSearchParams 数据

以上是 vue开发中axios提交两个post，第一次是OPTIONS 的全部内容， 来源链接： utcz.com/z/376825.html

回到顶部