使用 fetch 上傳 FormData 踩坑

先上結論, 使用fetch 和FormData , 不能設定Content-Type header !!!!

緣起

想要 通過blob 上傳二進位制檔案到伺服器, 很自然用瞭如下程式碼

let formData = new FormData();
formData.append('xxx', Blob, 'filename');

await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
},
body: formData,
});

但是伺服器一直報錯, 返回無法識別body

排錯

1. 換成xmlRequest 上傳, 依然報錯
2. 使用其它工具上傳(postman/insomnia ), 正常
3. 使用fetch 上傳, 報錯
4. 對比 傳送的資料, 發現使用fetch 上傳的Header 為:

Content-Type multipart/form-data

而 使用其它工具上傳時,Header 為

Content-Type: multipart/form-data; boundary=X-INSOMNIA-BOUNDARY

多了一個boundary 屬性

原因

使用FormData 傳輸二進位制資料,伺服器需要一種方法來知道一個欄位的資料何處結束以及下一個資料的起始位置.而boundary 定義了我們在請求中傳送的欄位之間的分隔符. 當刪除我們手動定義的Content-Type 之後, 瀏覽器會新增正確的boundary