Axios升级到1.0.0后带查询字符串的URL被篡改致404如何解决？

升级Axios到1.0.0+版本后，直接传入带查询字符串的URL会丢失问号，导致请求返回404错误。比如原URL https://my.server.com/some/path?foo=bar&baz=abc 会被处理成 https://my.server.com/some/pathfoo=bar&baz=abc，以下是针对该场景的解决方案：

最佳方案：使用URL对象传入请求 #

直接把外部获取的URL包装成URL实例，Axios会正确解析URL的各个组成部分（包括查询字符串），不会修改原始URL结构：

const externalUrl = 'https://my.server.com/some/path?foo=bar&baz=abc';
const targetUrl = new URL(externalUrl);

// 发起请求
axios.get(targetUrl)
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

备选方案：拆分URL路径与查询参数 #

如果需要单独处理查询参数，可以将URL拆分为路径和params对象，通过URLSearchParams解析查询字符串：

const externalUrl = 'https://my.server.com/some/path?foo=bar&baz=abc';
const urlObj = new URL(externalUrl);

axios.get(urlObj.origin + urlObj.pathname, {
  params: Object.fromEntries(urlObj.searchParams)
})
.then(res => console.log(res.data))
.catch(err => console.error(err));

原理说明 #

Axios 1.x版本调整了URL解析逻辑：当传入字符串类型的带查询字符串URL时，它会将问号及后续内容判定为路径的一部分，而非独立的查询参数，导致问号被忽略。使用URL对象可以明确告知Axios URL的结构，避免解析错误。

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