React Native中Fetch请求Authorization Header失效问题排查

看起来你遇到的问题是因为Fetch请求里的Authorization头格式完全错误，同时还有一个小拼写问题，导致后端无法识别你的登录凭证。咱们一步步来修复：

你的代码里的核心问题 #

1. Headers拼写错误：Fetch的配置选项里，请求头对应的键是小写的headers，而不是大写的Headers，这个拼写错误会导致部分头信息不被正确发送。
2. Authorization头格式错误：Basic认证的正确格式是Basic <base64编码的用户名:密码字符串>，而不是你代码里那样写'Authorization': 'Basic'再加一个对象。这种写法完全不符合HTTP头规范，后端自然无法解析出你的凭证。
3. 重复的Authorization字段：你在headers里写了两次Authorization，这会导致请求头混乱，进一步影响后端解析。

正确的实现代码 #

首先，我们需要把用户名:密码转换成base64编码。在React Native里可以用btoa()方法完成这个转换：

const username = 'test';
const password = 'test';
// 生成base64编码的凭证字符串
const basicAuth = 'Basic ' + btoa(`${username}:${password}`);

fetch(URL, {
  method: 'POST',
  // 注意这里是小写的headers
  headers: {
    'Accept': 'application/json',
    'Authorization': basicAuth,
    'Content-Type': 'application/x-www-form-urlencoded'
    // 移除了多余的Authorization对象
  },
  // 如果有请求体，记得补充对应的body内容
  body: 'your-form-data-here'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

额外说明 #

你可以把生成的basicAuth值打印出来，应该是Basic dGVzdDp0ZXN0——这和Postman里Basic认证自动生成的请求头内容完全一致，这样后端就能正确识别你的登录凭证了。

如果你的React Native环境不支持btoa()（比如某些旧版本），可以用Buffer替代（需要先安装buffer库：npm install buffer）：

import { Buffer } from 'buffer';
const basicAuth = 'Basic ' + Buffer.from(`${username}:${password}`).toString('base64');

这样修改后，你的Fetch请求就会和Postman的请求保持一致，应该就能正常拿到响应了。

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