標題的解釋

用了這麼一個字串當標題,是希望能後幫助到遇到相關問題的人.

問題描述

有這麼一個介面,postman(或其他API測試工具)能夠跑通,但是從瀏覽器的前端程式碼裡發出去就錯了,伺服器報500,那麼很有可能遇到了這個問題:content-type的設定和伺服器期望的不一樣.

現在後端通常會希望獲取到json格式的資料,所以通常請求的headers裡要設定content-type:application/json

headers: {
    "Content-Type": "application/json",
}

一般來說這麼做是沒有問題的,但是就怕忘了設定header,又多此一舉的改變了body中資料的型別:

fetch('url', {
    method: 'POST',
    body: JSON.stringify({
        xxx:xxx,
    }),
})

就是這麼多此一舉,

後端希望得到json, 於是我自己將post資料的body變成了一個json字串,同時我又忘記設定了header的content-type,會出現什麼呢?從開發者工具看到請求的header裡的content-type變成了text/plain,所以伺服器拿不到資料json,和期望的資料不同,自然就很有可能跑掛了,報500的可能性就很大了.

其實瀏覽器是很智慧的.

如果沒有設定header的conten-type, 在body中傳遞了物件

fetch('url', {
    method: 'POST',
    body: {
        xxx:xxx,
    },
})

瀏覽器會自動將content-type改成application/json,

如果是用了formdata

const body = new FormData()
body.append('xxx', 'xxx')
fetch('url', {
    method: 'POST',
    body,
})

瀏覽器也可以很好的識別出請求的content-type,

所以如果可以的話, 儘量不要自己設定這個欄位了,用正確的資料型別去告訴瀏覽器要用什麼content-type就可以了