如何使用查詢字符串將帶有 Axios 的請求發送到 URL？

Question

我正在嘗試將一段工作代碼從 Axios 0.27.2 升級到 1.0.0，並且處理帶有查詢字符串的 URL 的方式似乎中斷了。 也就是說，我得到一個 404 響應，實際使用的 URL 看起來與以前不同，因為缺少問號。

URL 看起來像這樣： https://my.server.com/some/path?foo=bar&baz=abc以前的 axios 使用它。 在 1.0.0 版本中，錯誤中報告的實際發送的 URL 是： https://my.server.com/some/pathfoo=bar&baz=abc

類似的問題都圍繞如何構建查詢字符串以及 axios 為此接受參數 object 的事實展開。 在我的例子中，我從其他地方得到一個 URL，它已經包含/可能包含一個查詢字符串。 我怎樣才能說服 Axios 使用這個 URL 而不以某種方式改變它？

Answer 1

axios.get('my-url', {
  params: {
    foo: "baz",
    baz: "abc",
  }
}).then(...)

是否需要指定是否為 CORS REQUEST（在請求前設置 axios 選項）

Answer 2

參見https://github.com/axios/axios/issues/4999

這是Axios 1.0.0的bug，1.1.0修復

Answer 3

您可以通過構建一個 function 將接收到的 url 拆分為包含基數 url 和參數的對象，然后傳遞給 axios 來解決此問題。

 function getUrlParams (url) { const fullUrl = url; const splitUrl = fullUrl.split("?"); const newUrl = splitUrl[0]; const paramsArray = splitUrl[1].split("&"); let paramsObj = {}; for(let i = 0; i < paramsArray.length; i++) { const arr = paramsArray[i].split("="); const keyName = arr[0]; const value = arr[1]; paramsObj = {...paramsObj, [keyName]: value}; } const data = { base: newUrl, params: paramsObj } return data; } const url = getUrlParams("https://my.server.com/some/path?foo=bar&baz=abc"); console.log(url)

然后撥打 axios 即可

axios.post(url.base, null, { params: url.params})