React新手使用Axios调用Strapi API遇403/404错误求助

排查步骤与解决方法 #

1. 验证API端点路径正确性 #

404错误核心原因是请求路径不存在，先确认：

• Strapi中内容类型生成的完整API路径，比如内容类型为posts，完整路径应为http://localhost:1337/api/posts，而非仅http://localhost:1337/api
• 直接在浏览器/Postman中访问${REACT_APP_API_URL}/[你的内容类型]，比如http://localhost:1337/api/posts，确认是否能返回数据，排除前端路径拼接错误

2. 确认API Token的权限配置 #

• 进入Strapi后台：设置 → API令牌，点击你生成的Token，查看关联的角色
• 进入设置 → 角色与权限 → 对应角色，找到目标内容类型，确保find（或你需要的操作）权限已开启
• 注意：API Token必须关联拥有对应API访问权限的角色，否则会触发403

3. 检查Axios请求配置 #

确保请求正确携带Token且路径完整，示例代码：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  headers: {
    // 必须添加Bearer前缀，这是Strapi API令牌的要求
    Authorization: `Bearer ${process.env.REACT_APP_API_TOKEN}`,
    'Content-Type': 'application/json',
  },
});

// 示例请求（替换为你的内容类型端点）
apiClient.get('/posts')
  .then(response => console.log(response.data))
  .catch(error => console.error('请求错误:', error));

4. 修正.env文件配置格式 #

• 移除变量值前后的空格，正确格式应为：

  REACT_APP_API_TOKEN=8bf07e7137c455bd18d24b31b0248398cd9a253eddf845d0c9b661072c85ad1057d3dcc02c22d07d70cb22c94eb7f2f8ebf9792871a1112350c1ce21d3db1cedfad5f3811fd168e5b819bad76979e7684973837bb8cab5f01df07d64dbb2211e1336d9b37780bbb6deb3bcf8f89a029eb9c3882c7d0f8f866f33fe50ac3fd59d
  REACT_APP_API_URL=http://localhost:1337/api
  

• 修改.env后必须重启React项目，否则新配置不会生效

5. 排查Strapi CORS设置（辅助） #

虽然404与CORS无关，但之前的403可能涉及跨域问题：

• 进入Strapi后台：设置 → API → CORS
• 在「允许的来源」中添加React项目的地址（如http://localhost:3000），测试阶段可临时用*（生产环境禁用）

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