React新手调用自定义REST API遇403错误，请求授权访问指导

核心结论 #

你遇到的403错误明确是权限验证失败，必须向客户索要授权凭证，常见的凭证类型包括：

• API密钥（API Key）
• Bearer Token（令牌）
• 其他自定义请求头凭证

同时要让客户明确告知：

• 凭证的携带方式（请求头/URL参数/Cookie）
• 凭证的具体格式（比如前缀是否需要Bearer 或ApiKey ）

React中使用凭证的常见示例 #

1. 请求头携带API Key #

如果客户要求用API Key放在请求头，用fetch或axios的写法如下：

Fetch示例

const fetchData = async () => {
  try {
    const response = await fetch('客户提供的API链接', {
      method: 'GET', // 按客户要求的请求方法调整，比如POST
      headers: {
        'Content-Type': 'application/json',
        'X-API-Key': process.env.REACT_APP_API_KEY // 从环境变量取密钥，不要硬编码
      }
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求失败:', error);
  }
};

Axios示例

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('客户提供的API链接', {
      headers: {
        'X-API-Key': process.env.REACT_APP_API_KEY
      }
    });
    console.log(response.data);
  } catch (error) {
    console.error('请求失败:', error);
  }
};

2. Bearer Token授权 #

如果客户提供的是Bearer Token，请求头格式要调整：

const fetchData = async () => {
  try {
    const response = await fetch('客户提供的API链接', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.REACT_APP_API_TOKEN}`
      }
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求失败:', error);
  }
};

关键注意事项 #

• 绝对不要把凭证硬编码在前端代码里，React项目中要放在.env文件里，变量名以REACT_APP_开头，比如REACT_APP_API_KEY=xxx，构建时会自动注入。
• 如果客户的API需要先获取Token（比如通过账号密码换取），要让客户提供Token获取接口、请求参数和返回格式，先调用该接口拿到Token再请求业务API。
• 若本地开发出现跨域错误，要么让客户在API服务器配置CORS允许你的开发域名，要么在React项目中配置代理（在package.json里加"proxy": "API域名"）。

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