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

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

回到顶部