迁移jQuery Ajax至Vue Axios时，GET请求[]参数未编码致请求失败

你完全说对了，这确实是参数编码方式的差异引发的问题！jQuery的$.getJSON()会自动把[]这类特殊字符编码成%5B%5D，但Axios默认的参数序列化逻辑不会这么做，直接把[]原样拼到URL里，后端接收到的参数格式不符合预期，就导致请求失败了。

为什么会有这个差异？ #

jQuery用的是自己一套参数序列化规则，会把所有可能引起歧义的特殊字符都做URL编码；而Axios默认依赖浏览器原生的URLSearchParams来处理参数，根据URL规范，[]属于“保留字符”但并非强制编码的范畴，所以URLSearchParams不会主动对它编码，这就和后端预期的编码格式不匹配了。

下面给你几个可行的解决方案： #

方案1：手动编码单个特殊参数

如果只是个别参数有这个问题，可以直接用encodeURIComponent()手动编码参数值：

public async fetchRows(data:any){
 try {
  const url="http://localhost:8080/app_Server/FetchData";
  const resp = await axios.get(url, { 
    params: { 
      userId : "alex", 
      queryListStr: encodeURIComponent("[]") 
    }
  });
  console.log(`this is the response: ${resp}`);
 } catch (e) {
  console.log(`Error! ${e.message}`);
 };
}

方案2：全局配置Axios的参数序列化逻辑，对齐jQuery

如果项目里很多请求都有类似的参数需要处理，直接全局修改Axios的序列化规则，让它和jQuery保持一致：

import axios from 'axios';

// 自定义序列化逻辑，对所有键值对都做URL编码
axios.defaults.paramsSerializer = (params) => {
  return Object.entries(params)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');
};

// 之后正常写请求即可
public async fetchRows(data:any){
 try {
  const url="http://localhost:8080/app_Server/FetchData";
  const resp = await axios.get(url, { 
    params: { userId : "alex", queryListStr :"[]" } 
  });
  console.log(`this is the response: ${resp}`);
 } catch (e) {
  console.log(`Error! ${e.message}`);
 };
}

方案3：用qs库来序列化参数（推荐）

qs是Axios官方推荐的参数序列化库，能更灵活地控制编码规则，完美对齐jQuery的行为。先安装依赖：

npm install qs

然后在请求里配置，或者全局设置：

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

public async fetchRows(data:any){
 try {
  const url="http://localhost:8080/app_Server/FetchData";
  const resp = await axios.get(url, { 
    params: { userId : "alex", queryListStr :"[]" },
    paramsSerializer: (params) => qs.stringify(params, { encode: true })
  });
  console.log(`this is the response: ${resp}`);
 } catch (e) {
  console.log(`Error! ${e.message}`);
 };
}

全局配置的话：

axios.defaults.paramsSerializer = (params) => qs.stringify(params, { encode: true });

验证效果 #

用上面任意一种方案后，你的请求URL会变成和jQuery一样的http://localhost:8080/app_Server/FetchData?userId=alex&queryListStr=%5B%5D，后端就能正常处理请求了。

内容的提问来源于stack exchange，提问作者Kona Laxman Deepak