Axios GET请求URL编码错误，如何修改代码获取正确编码？

问题核心是双重编码：你手动对q参数的JSON字符串执行了encodeURIComponent处理，但Axios本身会自动对params中的所有参数值做URL编码，导致最终q被编码两次（比如%7B被再次编码为%257B），和服务器期望的编码格式不符。

修改方案 #

直接移除手动的encodeURIComponent，将JSON字符串直接赋值给q参数，让Axios负责完成正确的编码：

const myOrg = await fetchMyOrg();

const response = await api.get<Resp<Asset>>('/asset/assets', {
  headers: { 'Accept-Version': '0.24.0.0' },
  params: {
    q: JSON.stringify({
      organizationId: myOrg.id, // 010a87ba-2e19-4ae7-b64e-a5496eaa825e
      ...(tags.length > 0 && { tags }), // ['Tag 1', 'Router']
    }),
    page: currentPage,
    size,
    sort: 'lastUpdateDateTime',
    dir: -1,
  },
});

可选：匹配服务器期望的带空格JSON格式 #

如果服务器要求q对应的JSON字符串带有缩进空格（从你给出的正确编码能看到%20对应的空格），可以给JSON.stringify添加格式化参数，生成带缩进的字符串，Axios会自动将空格编码为%20：

q: JSON.stringify({
  organizationId: myOrg.id,
  ...(tags.length > 0 && { tags }),
}, null, 2), // 第三个参数2表示缩进2个空格，生成带格式的JSON字符串

调整后生成的URL编码会和服务器期望的完全一致。

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