axios请求，参数是一个对象，但是提交后参数变成了一个另一个对象的键，值为空。急急急，求大佬解答？

Question

1.方法的定义

export function updatePassword(data) {
  return request({
    url:"/api/updateAdminPass",
    method: 'post',
    data:data,
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    },

  })
}

2.方法的调用

3.参数突然就变了

后端打印为

Answer 1

如果在使用axios请求提交表单时，表单数据变为字符串键，值为空的情况，可能是因为axios默认将请求数据格式化为JSON格式，而表单数据需要以URL编码的形式提交。解决此问题可以通过以下两种方式：

使用qs库将表单数据格式化为URL编码形式
可以使用qs库，将表单数据转换为URL编码的形式，然后通过axios发送请求。具体代码如下：
import axios from 'axios';
import qs from 'qs';

const data = {
name: 'John Doe',
age: 30
};

axios.post('/api/submit', qs.stringify(data))
.then(response => {

console.log(response);

})
.catch(error => {

console.log(error);

});

Answer 2

把 Content-Type 改成 application/json

Answer 3

把接口的headers配置项删除

Answer 4

一个是请求类型不对，你传入的是一个对象，所以一般按照 JSON 格式去传递，但是你用 formData （表单格式）的请求类型，如果后端要求是表单数据，那么就需要使用 new FormData() 来包裹你的请求数据。
一般来说：

• JSON 格式内容类型为 Content-Type: application/json
• 表单格式的内容类型为：Content-Type: application/x-www-form-urlencoded

具体应该提交什么类型的，得看你的接口文档。

另外一个是得看你的请求拦截器，是否做了一些转换处理。

---

最后贴一个简单的对象转表单对象方法，有需要可以借用以下：

function obj2form(obj) {
  // 1. Create new FormData object
  const formData = new FormData()
  // 2. Loop through the object
  for (const key in obj) {
    // 3. Append each key-value pair to the FormData object
    formData.append(key, obj[key])
  }
  // 4. Return the FormData object
  return formData
}
export default obj2form

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 5

方法有很多，任选其一。当然背后有各种各样的场景

1. 把 Content-Type 删了，这样默认会发 json 格式的。
2. 不使用 data 传递数据，使用 params 传递，这样会带在 url 上，一般 java 后端可以取到。

3. 自己处理为 url-endcode 格式

   1. 使用 qs 来处理
   2. 使用 urlsearchparams 来处理
   3. 自己使用方法来处理。陟上晴明 的方法。昂，他是转 formdata 了，还不是很一样

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 6

只需改为 "Content-Type": "application/json" 即可，其实不管传什么格式，只要后端能够接收并解析到就可以了，例如一些老的系统早期定死了接收格式，导致不支持 json 的方式去传参等，和后端协商好即可，可前端改也可后端改。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 7

hearders 头设置成 Content-Type: application/json

export function updatePassword(data) {
  return request({
    url:"/api/updateAdminPass",
    method: 'post',
    data:data,
    headers: {
      "Content-Type": "application/json"
    },
  })
}

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 8

理论上将"Content-Type": "application/json"改成这个就可以的。

如果不行，比较好奇，你的data传的啥，以及request咋封装的。

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。