React+Strapi电商项目调用API出现404及ERR_BAD_REQUEST错误求助

从错误日志能明确看到，请求URL里出现了undefined，这是导致404错误的核心原因，本质是环境变量未正确加载/配置错误，同时还存在Strapi地址混淆的问题。

1. 修正环境变量配置 #

• 确保项目根目录有.env.development文件（开发环境专用），React要求环境变量必须以REACT_APP_开头，正确填写Strapi的API地址：

  REACT_APP_STRAPI_APP_DEV_URL=http://localhost:1337
  REACT_APP_STRAPI_API_TOKEN=你的Strapi API Token
  

  注意：Strapi默认运行在1337端口，你的请求发到了React的3000端口，这是典型的地址混淆错误。

2. 重启React开发服务器 #

React不会自动读取修改后的环境变量，修改.env文件后必须重启npm start或yarn start进程，确保变量生效。

3. 验证环境变量加载情况 #

在api.js中添加日志，确认变量是否被正确读取：

import axios from "axios";

// 添加日志验证
console.log('Strapi Base URL:', process.env.REACT_APP_STRAPI_APP_DEV_URL);
console.log('API Token:', process.env.REACT_APP_STRAPI_API_TOKEN);

const params = {
  headers: {
    "Authorization": "bearer " + process.env.REACT_APP_STRAPI_API_TOKEN,
  },
};

export const fetchDataFromApi = async (url) => {
  try {
    const baseUrl = process.env.REACT_APP_STRAPI_APP_DEV_URL || 'http://localhost:1337';
    const { data } = await axios.get(`${baseUrl}${url}`, params);
    return data;
  } catch (err) {
    console.log(err);
    return err;
  }
};

如果日志输出undefined，检查变量名是否存在拼写错误（大小写、下划线必须完全匹配）。

4. 确认Strapi的API权限与内容状态 #

• 进入Strapi后台，检查products和categories内容类型是否已发布（草稿状态无法通过API访问）。
• 配置API权限：依次点击Settings → Roles & Permissions → 选择对应角色（比如Public或自定义角色），找到products和categories，勾选find权限并保存。

5. 代码优化（可选） #

给基础URL添加默认值，避免因环境变量缺失导致无效请求：

const baseUrl = process.env.REACT_APP_STRAPI_APP_DEV_URL || 'http://localhost:1337';
const { data } = await axios.get(`${baseUrl}${url}`, params);

内容的提问来源于stack exchange，提问作者Emilio Alcántara