提供给 Axios 的 URL 编码错误

Question

这是我在使用 Axios 发送 GET 请求之前进行编码的地方：

const myOrg = await fetchMyOrg();

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

它产生这种编码：

https://agw4web1.dev.hannlync.com/asset/assets?q=%257B%2522organizationId%2522%253A%2522010a87ba-2e19-4ae7-b64e-a5496eaa825e%2522%252C%2522tags%2522%253A%255B%2522Tag%25201%2522%252C%2522Router%2522%255D%257D&page=1&size=10&sort=lastUpdateDateTime&dir=-1

但这是正确的编码：

https://agw4web1.dev.hannlync.com/asset/assets?q=%7B%20%20%22organizationId%22%3A%20%22010a87ba-2e19-4ae7-b64e-a5496eaa825e%22%2C%20tags%3A%20%5B%22Tag%201%22%2C%20%22Router%22%5D%7D&page=1&size=10&sort=lastUpdateDateTime&dir=-1

如何修改代码才能得到第二种编码？

Answer 1

Axios 已经使用（类似于）

params

对

encodeURIComponent()

值进行编码，因此您所做的就是对 JSON 值进行双重编码。

这意味着服务器端在解码查询参数后将收到一个 URL 编码的 JSON 字符串。

只需省略

encodeURIComponent()

调用，让 Axios 做它的事情

const response = await api.get<Resp<Asset>>("/asset/assets", {
  headers: { "Accept-Version": "0.24.0.0" },
  params: {
    q: JSON.stringify({
      organizationId: myOrg.id,
      ...(tags.length > 0 && { tags }),
    }),
    page: currentPage,
    size,
    sort: "lastUpdateDateTime",
    dir: -1,
  },
});