React Native中Fetch POST请求无法被服务器正常读取问题

我太懂这种排查半天找不到问题的烦躁了！unsupported_grant_type这个错误其实指向性很强——你的请求体格式或者grant_type参数肯定不符合目标API的OAuth 2.0要求，跟你怀疑的Fetch实现关系不大，大概率是请求体的编码方式出了问题。

问题根源分析 #

你代码里已经设置了Content-Type: application/x-www-form-urlencoded，但如果你的请求体是直接传JSON对象，或者没有正确编码成键值对字符串，服务器就无法解析出grant_type参数，自然会返回这个错误。这是React Native Fetch里很容易踩的坑：很多人会习惯性传JSON，但x-www-form-urlencoded要求的是key1=value1&key2=value2这种格式的字符串。

修正后的代码示例 #

方式1：手动构建编码后的请求体（最稳妥） #

// 先定义API要求的所有必填参数，grant_type必须严格匹配API文档
const requestParams = {
  grant_type: 'password', // 替换成你的API要求的类型，比如client_credentials
  username: 'your-username',
  password: 'your-password'
};

// 将参数编码成x-www-form-urlencoded格式的字符串
const formBody = Object.entries(requestParams)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join('&');

const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'Basic TWVtYm...' // 确保这里是client_id:client_secret的Base64编码，无多余空格
  },
  body: formBody // 这里必须传编码后的字符串，不能传JSON！
};

// 发起请求
fetch('你的API地址', options)
  .then(res => res.json())
  .then(data => console.log('请求成功:', data))
  .catch(err => console.error('请求失败:', err));

方式2：使用FormData（注意服务器兼容性） #

有些服务器支持FormData解析，但要注意：用FormData时浏览器/React Native会自动把Content-Type设为multipart/form-data，如果你的API只接受x-www-form-urlencoded，还是用方式1更保险。

const formData = new FormData();
formData.append('grant_type', 'password');
formData.append('username', 'your-username');
formData.append('password', 'your-password');

const options = {
  method: 'POST',
  headers: {
    'Authorization': 'Basic TWVtYm...'
    // 不要手动设置Content-Type，让FormData自动处理
  },
  body: formData
};

关键检查点 #

• 确认grant_type的正确性：比如API要求的是client_credentials，你传成password就会报错，必须严格匹配文档里的取值
• 验证Authorization头：Basic后面的字符串必须是client_id:client_secret的Base64编码，可以用在线工具验证编码是否正确
• 用Postman先测试：把参数和Headers都在Postman里配置好，确认能正常拿到响应，再复制到React Native代码里，排除API本身的问题
• 检查参数完整性：有些API可能还需要其他必填参数（比如scope），漏传也会导致格式错误

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