axio post 请求后端接收不到参数的解决办法

本文详细介绍了在使用axios发送POST请求时,如何正确地将参数序列化为application/x-www-form-urlencoded格式。提供了两种方法:一是使用原生JS进行序列化;二是利用qs库进行序列化。并解释了无需手动设置Content-Type的原因。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原因是没有对参数进行序列化

默认情况下,axios将JavaScript对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据。

在拦截器前修改

方法一,用原生js序列化参数

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 30000, // 请求超时时间
  transformRequest: [function(data) {
    const str = []
    for (const i in data) {
      str.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]))
    }
    return str.join('&')
  }]
})

方法二,用qs序列化参数

//npm install axios的时候默认会安装qs
// qs相关的问题请搜索"nodejs qs"或者看这里https://www.npmjs.com/package/qs
import qs from 'qs';

const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 30000, // 请求超时时间
  transformRequest: [
    function(data) {
      return qs.stringify(data, {
        arrayFormat: 'brackets'
      })
    }
  ]
})

网上方案说要加

instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

我没有加,因为我发现默认axios的post就是x-www-form-urlencoded。

到此,这个问题解决了

转载于:https://www.cnblogs.com/wuyuchao/p/10300250.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值