Axios 使用时遇到的问题

在使用Vue与axios进行POST请求时,需确保传递的数据被正确序列化。本文介绍了两种方法:一是使用JSON.stringify()结合URLSearchParams,二是利用qs库进行序列化。选择哪种方式取决于服务器的具体需求。

最近使用 vue 构建一个小项目,在使用 axios 发送 post 请求的时候,发现 axios 发送数据默认使用 json 格式,百度搜了下,更改 ContentType 不管用,最终问题原来是: post 的传参需要序列化,不然服务端不会正确接收数据,终于找到两种方法解决:

方法一:使用 JSON.stringify( )

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串;
JSON.stringify( )用于从一个对象解析出字符串。
在 vue 项目中,发送的参数定义为 param,

let param = new URLSearchParams()
param.append("bizContent", JSON.stringify(bizContent))
axios.post(httpUrl.getDatas, param)

方法二:使用 qs 库

首先要安装 qs,然后在项目中引用:
import qs from 'qs'
同样,我们使用 qs.stringify( ) 这个方法处理 post 请求中需要发送的数据

相比较

相比较这两种方法,功能都是序列化,但是处理出来的结果还是不一样的,使用的时候还要看服务器的要求,下面的传送门大家可以了解两者序列化的结果有何不同: 传送门

### 使用 Axios 发送不同 `Content-Type` 请求遇到的问题及解决方案 当使用 Axios 发送 POST 请求并指定不同的 `Content-Type` ,可能会遇到参数无法被服务器端正确接收的情况。以下是针对不同类型请求的具体处理方式。 #### 设置默认请求头 对于需要发送 `application/x-www-form-urlencoded` 类型数据的情形: ```javascript // 设置全局的 Content-Type 默认值为 application/x-www-form-urlencoded axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; ``` 如果仅希望特定实例应用此配置,则可以创建一个新的 Axios 实例来覆盖默认行为[^1]。 #### 处理 JSON 数据类型的跨域问题 当涉及到带有 Cookie 的跨域请求,除了要确保设置了正确的 MIME 类型外,还需要开启 CORS 支持以及允许凭证传输: ```javascript axios.defaults.withCredentials = true; axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'; ``` 需要注意的是,在服务端也要相应地调整 CORS 配置以支持带凭据的请求[^2]。 #### 序列化 FormData 对象 为了能够成功提交表单格式的数据 (`application/x-www-form-urlencoded`) ,可以通过 URLSearchParams 或 qs 模块来进行序列化操作: ```javascript const params = new URLSearchParams(); params.append('param1', value1); params.append('param2', value2); axios({ method: 'post', url: '/submitForm', data: params, }); ``` 或者利用第三方库如 qs 来简化复杂对象到查询字符串转换的过程[^3]。 通过上述措施,应该能有效解决大多数情况下由于不匹配的内容类型所引起的客户端与服务器之间通信失败的问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值