2024年5月2日 星期四

有沒有一種可能在axios會報錯,fetch卻會成功呢

前言

今天與後端工程師對接,使用axios在url正確,method正確,且不送參數的情況下,api順利的回來了,但換另外一隻api媽的鬼故事就開始了。

由於我打login api,所以理應需要傳送username, password,竟然報錯Network error,console報CORS,一開始我一直懷疑是行火牆問題,但有什麼理由第一隻api會過第二隻不會。難道防火牆會只擋這隻api!!然後後端堅持他的設定沒問題。還傳搭打成功的截圖給我,重點是只有截圖沒有程式碼,而且我跟你ip國籍不同,變數太多拉!!

最後後端工程師提到,設定與上一個專案相同,我想到上一個專案底層是用fetch去寫的,所以我死馬當活馬醫,改用fetch去打api,竟然還真的給我打過了.....所以問題出在哪呢?經過我反覆嘗試找到了差異,以下進入程式

fetch(url, {
method: "post",
    body: JSON.stringify(data)
})
axios({
method,
url,
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
      data,
})
// 簡單說fetch預設Content-Type是application/x-www-form-urlencoded,而axios預設是application/json
// 所以fetch的body需要JSON.stringify就是因為要轉成網址

上網查一下application/x-www-form-urlencoded這是一個比較古老的編碼形式,然後data還必須傳formData,所以我說到底誰還在寫這麼難用的api,真他X的


沒有留言:

張貼留言