如何让Axios设置Form Data与jQuery Ajax格式一致？

首先得明确：这不是开发者工具的展示差异，是实际请求内容和格式的本质不同，核心在于两者默认的请求体类型和序列化方式不一样。

为什么格式不同？ #

• jQuery的$.ajax默认会把传入的对象数据序列化成application/x-www-form-urlencoded格式（也就是key1=value1&key2=value2这种表单键值对），同时自动把请求头的Content-Type设为对应的值。
• Axios默认会把JavaScript对象转成JSON字符串，请求头Content-Type是application/json，所以你在开发者工具里看到的是JSON格式的请求体，后端如果只适配了form表单格式的话，就会解析不到参数。

让Axios匹配jQuery格式的方法 #

下面是几种常用的解决方案，按需选择：

1. 单次请求手动序列化数据 #

如果只是个别请求需要适配，直接手动处理数据和请求头：

• 用浏览器原生的URLSearchParams（适合简单的键值对数据）：

  const requestData = new URLSearchParams();
  requestData.append('username', 'farzad');
  requestData.append('email', 'farzad@example.com');
  
  axios.post('/api/your-endpoint', requestData, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
  

• 如果有嵌套对象或者复杂数据，推荐用qs库来序列化（先安装qs：npm install qs）：

  import qs from 'qs';
  
  const requestData = {
    user: {
      username: 'farzad',
      email: 'farzad@example.com'
    },
    role: 'admin'
  };
  
  axios.post('/api/your-endpoint', qs.stringify(requestData), {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
  

2. 全局配置Axios（所有请求默认适配） #

如果项目里大部分请求都需要和jQuery格式一致，可以全局配置Axios，不用每次重复设置：

import axios from 'axios';
import qs from 'qs';

// 设置默认的Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 设置请求数据的全局转换函数，自动把对象序列化成form格式
axios.defaults.transformRequest = [function(data) {
  // 如果数据是FormData或者非对象，直接返回
  if (data instanceof FormData || typeof data !== 'object') {
    return data;
  }
  return qs.stringify(data);
}];

之后你发送请求就像平时一样传对象就行，Axios会自动帮你处理成form格式：

axios.post('/api/your-endpoint', { username: 'farzad', role: 'admin' });

3. 借助jQuery的$.param（如果项目还在用jQuery） #

如果你项目里已经引入了jQuery，也可以直接用它的$.param方法来序列化数据：

axios.post('/api/your-endpoint', $.param({ username: 'farzad', email: 'farzad@example.com' }), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
});

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