将正常运行的Axios POST请求转为Fetch时遇400错误，求解决

你遇到的Bad Request问题核心是手动设置了Content-Type: multipart/form-data，导致浏览器无法自动添加表单数据必需的boundary分隔符，服务器无法正确解析请求体。

修正方案 #

1. 移除手动设置的Content-Type头，Fetch会自动根据FormData生成包含boundary的正确Content-Type
2. 匹配Axios的Accept头，确保请求头和原请求一致

修正后的完整代码 #

const authorization = btoa('AAAAA:BBBBB')

const data = new FormData()
data.append('grant_type', 'password')
data.append('username', 'XXXXX')
data.append('password', 'YYYYY')

const response = await fetch('https://www.example.com/endpoint/', {
    method: 'POST',
    credentials: 'omit',
    headers: {
      Accept: 'application/json, text/plain, */*', // 匹配Axios的Accept头
      Authorization: `Basic ${authorization}`
      // 移除手动设置的Content-Type，由浏览器自动生成
    },
    body: data
})

// 补充响应解析逻辑，和原Axios代码对齐
const answerData = await response.json()
console.log('answer', answerData.answer)

关键细节说明 #

• 当传递FormData作为请求body时，浏览器会自动生成multipart/form-data; boundary=xxxx格式的Content-Type，其中boundary是用来分隔表单不同字段的唯一标识符，服务器依赖它拆分和解析表单数据
• Axios内部会自动覆盖你手动设置的Content-Type并添加正确的boundary，而Fetch会严格遵循手动设置的头，导致缺失boundary，这是请求失败的核心原因
• 虽然Accept头的差异不是主要问题，但保持和原请求一致可以避免不必要的兼容问题

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