如何使用Axios发送键不带双引号的JSON格式数据？

问题原因 #

你设置了Content-Type: application/x-www-form-urlencoded，但实际发送的是带引号键名的JSON格式数据，后端期望的是表单编码格式（如email=mytest@email.com&password=xxx），格式不匹配导致解析失败。

解决方案 #

方案1：发送表单编码格式数据（匹配Postman请求） #

使用URLSearchParams构造符合要求的表单数据，Axios会自动将其转换为后端期望的格式：

// 构造表单数据
const formData = new URLSearchParams();
formData.append('email', data.get('email'));
formData.append('password', data.get('password'));

const options = {
  headers: { 
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    "Accept": "application/json" 
  }
}

axios.post('http://127.0.0.1/register/', formData, options)

方案2：后端支持JSON时，修改Content-Type #

如果后端实际可接收JSON格式数据，只需将请求头的Content-Type改为application/json，保持原数据结构即可：

const options = {
  headers: { 
    'Content-Type': 'application/json',
    "Accept": "application/json" 
  }
}

axios.post('http://127.0.0.1/register/', 
{
  email: data.get('email'), 
  password: data.get('password'), 
}, options)

补充说明 #

当给Axios传递普通JS对象且Content-Type设为application/x-www-form-urlencoded时，Axios不会自动将其转换为表单编码格式，而是默认序列化为JSON字符串，这就是后端无法读取数据的核心原因。若需处理复杂嵌套数据，也可使用qs库来序列化表单数据。

内容的提问来源于stack exchange，提问作者Jay Kyung