使用Fetch从Django OAuth Toolkit获取访问令牌遇错求助

核心错误原因 #

你手动设置了Content-Type: multipart/form-data头，但没有包含浏览器自动生成的boundary分隔符，导致Django OAuth Toolkit无法正确解析表单数据，返回400错误；移除头后出现500，大概率是表单字段缺失或客户端配置问题。

修正方案 #

1. 移除手动设置的Content-Type头：当body是FormData对象时，浏览器会自动添加包含正确boundary的Content-Type头，无需手动指定。
2. 确保表单字段完整：必须包含grant_type=password，以及正确的username和password字段。
3. 添加错误日志排查：捕获返回的错误信息，快速定位问题。

修正后的代码 #

const data = await request.formData();
// 强制添加grant_type，避免前端漏传导致的错误
data.append('grant_type', 'password');

const oauth = await fetch(`${API_ROOT}/o/token`, {
    method: 'POST',
    headers: {
        Authorization: `Basic ${Buffer.from(CLIENT_ID + ':' + CLIENT_SECRET).toString('base64')}`
    },
    body: data
});

// 排查错误用：打印服务器返回的具体错误信息
if (!oauth.ok) {
    const errorDetails = await oauth.json();
    console.error('令牌请求失败:', errorDetails);
}

额外排查点 #

• 确认CLIENT_ID和CLIENT_SECRET与Insomnia中使用的完全一致，没有拼写或大小写错误。
• 检查Django后台的OAuth应用配置：授权类型是否勾选了"Resource owner password-based"，客户端类型是否为"Confidential"。
• 如果是SvelteKit客户端侧调用（而非server route），Buffer需要替换为浏览器兼容的base64编码方式，比如：

  btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)
  

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