React中使用Axios请求出现401未授权错误求助

1. 检查Strapi接口权限配置 #

• 登录Strapi后台，找到Categories集合类型，切换到权限标签页
• 确认public角色是否开启了find（获取列表）权限，未开启的话勾选并保存

2. 确保Axios请求携带有效认证信息 #

如果接口需要用户认证访问，必须在请求头中携带JWT token：

• 从localStorage或状态管理工具中取出用户登录后获取的token
• 调整你的fetchDataFromAPI封装逻辑，添加Authorization请求头：

const fetchDataFromAPI = async (url) => {
  const token = localStorage.getItem('strapi-user-token'); // 替换为你实际存储token的key
  const res = await axios.get(url, {
    headers: {
      ...(token && { Authorization: `Bearer ${token}` })
    }
  });
  return res.data;
};

如果是公开接口，要确保请求头里没有携带无效的Authorization字段，避免触发Strapi的认证校验。

3. 验证Strapi的CORS配置 #

打开Strapi项目的config/middlewares.js文件，确认CORS配置允许你的React项目域名：

module.exports = [
  // ...其他中间件配置
  {
    name: 'strapi::cors',
    config: {
      origin: ['http://localhost:3000'], // 替换为你的React项目运行地址
      methods: ['GET', 'POST', 'PUT', 'DELETE'],
      credentials: true,
    },
  },
];

4. 查看请求详情确认问题 #

打开浏览器开发者工具的Network面板，找到请求/api/categories：

• 检查Request Headers里的Authorization字段是否存在、格式是否正确（Bearer xxxxxx）
• 查看Response的详细错误信息，Strapi通常会返回具体的未授权原因，帮助定位问题

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