axios post请求后台获取不到参数

使用vue开发项目,ajax打算使用axios(听说很牛逼,就想试试)。结果发现post请求后台获取不到参数。

代码如下:

axios. post( '/v1/card/info', {
                        cardNo: this.iccid,
                        loading: true,
                    }). then( resp => {
                         if (resp.data.success) {
                            window.location.href = './detail.html'
                        }
                    })


1、将axios换成jQuery,获取参数没有,所以应该是axios某个设置有问题

2、观察axios请求

axios:


很明显axios请求的Content-Type为application-json,所以后台接收不到


解决方案:

这篇文章给出了三种方案:https://segmentfault.com/a/1190000012635783

我使用的是第三种方案,使用qs对参数进行处理

文章中在post请求的时候使用qs.stringify(param),对参数进行处理,这样做每个post请求都需要这样处理,虽然没有问题,但是感觉还是有些别扭,而且每次post请求都需要处理。翻阅axios使用手册时发现axios有拦截器功能,所以就尝试能不能使用拦截器处理,结果证明是可以的。代码如下:


这样再次请求数据就正常了


### 常见原因分析 在使用 Axios 发送 POST 请求时,如果后台无法接收到参数,通常可能由以下几个方面的原因引起: 1. **Content-Type 不匹配** 如果前端设置的 `Content-Type` 和后端解析器不一致,则可能导致后端无法正确解析请求体中的数据。例如,Axios 默认会将 POST 数据作为 JSON 格式的 `Request Payload` 发送,而某些后端框架(如 Java 的 Spring Boot)默认期望的是表单格式的数据 (`application/x-www-form-urlencoded`)。 2. **数据格式错误** Axios 默认发送的对象会被序列化为 JSON 字符串。然而,部分后端仅支持接收 URL 编码形式的键值对数据。因此,当数据以 JSON 形式传递时,可能会被忽略。 3. **缺少必要的依赖库** 在需要转换数据格式的情况下,如果没有引入合适的工具库(如 `qs`),则难以实现从对象到 URL 编码字符串的转化[^2]。 --- ### 解决方案 以下是针对上述问题的具体解决方法: #### 方法一:使用 `qs` 库进行数据序列化 通过安装并配置 `qs` 库,可以轻松地将 JavaScript 对象转化为 URL 编码的形式。具体操作如下: ```javascript // 安装 qs 库 npm install qs --save import axios from 'axios'; import qs from 'qs'; let postData = { certificationAccount: 'example', balance: 100 }; axios.post('/api/endpoint', qs.stringify(postData), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(response => { console.log(response.data); }); ``` 此方法适用于大多数场景,并能有效兼容不同类型的后端接口需求[^4]。 #### 方法二:手动拼接查询字符串 如果不希望额外增加第三方依赖项,也可以采用手动生成 URL 参数的方式完成相同功能: ```javascript function toQueryString(obj) { const paramsArray = []; Object.keys(obj).forEach(key => { if (obj[key]) { paramsArray.push(`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`); } }); return paramsArray.join('&'); } const postData = { username: 'testUser', password: 'password' }; axios({ method: 'post', url: '/login', data: toQueryString(postData), headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then(res => console.log(res)) .catch(err => console.error(err)); ``` 这种方法虽然简单易懂,但对于复杂结构的数据处理起来较为繁琐[^3]。 #### 方法三:调整 Content-Type 为 application/json 对于那些能够接受 JSON 输入的服务来说,只需确保设置了正确的头部信息即可正常工作: ```javascript axios.post('/submit', { key1: value1 }, { headers: {'content-type': 'application/json'} }).then((response)=>{ console.log('Success:', response.status); }).catch((error)=>{ console.log('Error:', error.message); }); ``` 注意这里不再需要任何特殊编码过程,因为目标 API 已经明确声明它偏好这种媒介类型[^1]。 --- ### 总结 综上所述,在遇到 Vue 中利用 Axios 执行 Post 操作却得不到预期响应的情况时,应优先考虑是否存在以上提到的内容类型差异或者传输机制上的偏差等问题;然后依据实际情况选取恰当的技术手段予以修正。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值