curl请求成功但JavaScript fetch调用FastAPI接口返回body解析错误是什么原因

问题原因及修复方案 #

1. 错误手动设置了multipart/form-data请求头 #

当你使用fetch传递FormData类型的请求体时，浏览器会自动生成Content-Type: multipart/form-data请求头，同时自动补充表单边界boundary参数。你手动指定这个头之后，会覆盖浏览器自动生成的带边界的头，服务端无法识别表单字段的分隔边界，就会抛出解析body失败的错误。

2. 缺少必填的reference字段 #

对比可以正常执行的curl命令，你在FormData中遗漏了reference字段，curl中显式传了-F 'reference='，如果FastAPI服务端定义了这个字段作为入参，缺失会导致参数校验/解析失败。

3. 未明确指定上传文件的MIME类型 #

curl命令中指定了pdf文件的类型为application/pdf，你当前的FormData.append逻辑未显式指定，部分场景下浏览器识别文件类型错误也会导致服务端解析异常。

修正后的fetch代码 #

var myHeaders = new Headers();
myHeaders.append("accept", "application/json");
myHeaders.append("Authorization", "Bearer asdfasdfasdfasdfasdf");
// 删掉手动设置Content-Type的逻辑，交给浏览器自动生成

var formdata = new FormData();
// 上传文件时显式指定MIME类型
formdata.append("images", fileInput.files[0], "_265_.pdf", { type: "application/pdf" });
formdata.append("cards", fileInput.files[0], "_180_.pdf", { type: "application/pdf" });
// 补上缺失的reference字段
formdata.append("reference", "");
formdata.append("organization", "org");

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: formdata,
  redirect: 'follow'
};

fetch("https://site/route?match_cut=0.64&Img_cut=0.45&card_cut=0.45&Img_card_cut=0.45&card_img_cut=0.45", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

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