React/TypeScript调用API遇401未授权错误，求解决方案

从你的代码和需求描述来看，核心问题集中在请求头配置不符合API授权要求，以下是具体排查和修复步骤：

1. 修正请求头的核心错误 #

你明确提到API要求用名为token的密钥作为请求头，但当前代码的请求头配置完全不符合要求：

const headers = {
  Authorization: apiToken, 
  'key': 'token', // 这里是硬编码字符串'token'，不是你的实际密钥值
  'Content-Type': 'application/json',
};

这里有两个致命问题：

• 'key': 'token' 是把字符串token作为值传给key头，完全没有用到你从.env读取的密钥
• 混淆了Authorization头和API要求的自定义token头，两者不能随意混用

2. 检查环境变量的读取正确性 #

React项目中，环境变量必须以REACT_APP_开头才能被process.env读取，否则会返回undefined：

• 把.env里的变量名改成REACT_APP_API_TOKEN（比如REACT_APP_API_TOKEN=你的实际密钥）
• 修改.env后必须重启开发服务器，否则新变量不会生效
• 可以在代码里加console.log('读取到的token:', process.env.REACT_APP_API_TOKEN)，确认是否拿到正确值

3. 重新配置请求头 #

根据API要求的两种常见授权格式，二选一修复：

格式一：API要求直接用token请求头（无Bearer前缀） #

// 先修正环境变量读取
const apiToken = process.env.REACT_APP_API_TOKEN;

// 重构请求头
const headers: Record<string, string> = {
  token: apiToken! // 直接使用API要求的token头
};
// 只有非POST请求（且不是FormData）才加Content-Type
if (options.method !== 'POST' || !options.body) {
  headers['Content-Type'] = 'application/json';
}

格式二：API要求Authorization: Bearer {token}格式 #

如果是你对API文档的描述有误，实际需要Bearer认证，就这么改：

const apiToken = process.env.REACT_APP_API_TOKEN;
const authHeader = `Bearer ${apiToken!}`;

const headers: Record<string, string> = {
  Authorization: authHeader
};
// 同样处理Content-Type
if (options.method !== 'POST' || !options.body) {
  headers['Content-Type'] = 'application/json';
}

4. 修复FormData的Content-Type问题 #

你的createPost函数使用了FormData，此时绝对不能手动设置Content-Type: application/json，否则会导致请求格式完全错误，部分API会把格式错误判定为授权失败返回401。浏览器会自动为FormData请求添加正确的multipart/form-data; boundary=xxx头。

5. 验证请求是否正确发送 #

打开浏览器开发者工具的Network面板，找到对应的API请求：

• 查看Request Headers，确认token或Authorization头是否存在，值是否和你.env里的一致
• 如果头没有出现，检查环境变量是否读取正确；如果值不对，检查.env文件内容

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