如何使用Axios在查询字符串中传递数值类型参数

使用Axios发送POST请求时，查询字符串中的数值参数会被默认序列化转为带引号的字符串，导致后端无法识别为数值类型。即便使用qs库也可能出现这个问题，以下是两种可行的解决方法：

方法一：自定义参数序列化逻辑 #

手动实现序列化函数，确保数值、布尔值等类型直接转为无引号的字符串：

axios.defaults.paramsSerializer = (params) => {
  return Object.entries(params)
    .map(([key, value]) => {
      let encodedValue;
      switch (typeof value) {
        case 'number':
        case 'boolean':
          encodedValue = value.toString();
          break;
        case 'object':
          encodedValue = encodeURIComponent(JSON.stringify(value));
          break;
        default:
          encodedValue = encodeURIComponent(value);
      }
      return `${encodeURIComponent(key)}=${encodedValue}`;
    })
    .join('&');
};

方法二：配置qs库的序列化规则 #

如果继续使用qs，通过自定义encoder来处理数值类型，避免添加引号：

import qs from 'qs';

axios.defaults.paramsSerializer = (params) => {
  return qs.stringify(params, {
    encoder: (value, defaultEncoder) => {
      if (typeof value === 'number' || typeof value === 'boolean') {
        return value.toString();
      }
      return defaultEncoder(value);
    },
    skipNulls: true // 可选：跳过值为null的参数
  });
};

注意事项 #

• 检查是否存在请求拦截器无意中修改了参数类型
• 后端解析逻辑正常（Swagger能正常调用说明没问题），问题核心是前端序列化时给数值添加了不必要的引号

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