React应用本地正常Netlify部署后API调用异常求助

从你描述的情况来看，部署后API URL出现/undefined/片段，核心原因是代码中依赖的环境变量（比如axios的baseURL、请求头密钥等）在Netlify上未配置，导致打包时变量读取失败，最终拼出错误的请求地址。以下是具体配置和修复步骤：

1. 确认代码中的环境变量命名 #

React项目中，环境变量必须以REACT_APP_为前缀才能被打包工具识别。检查你axios实例中的配置，确保是读取这类前缀的变量，示例代码如下：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,
  headers: {
    'X-RapidAPI-Key': process.env.REACT_APP_RAPIDAPI_KEY,
    'X-RapidAPI-Host': process.env.REACT_APP_RAPIDAPI_HOST
  }
});

2. 在Netlify中配置环境变量 #

• 登录Netlify后台，找到你的Games-App项目
• 进入项目的站点设置（Site settings）
• 在左侧菜单选择环境变量（Environment variables）
• 点击添加变量，依次填入你本地.env文件中对应的变量：
  • 变量名：REACT_APP_API_BASE_URL，值填写freetogame API的基础地址（比如https://free-to-play-games-database.p.rapidapi.com/api）
  • 变量名：REACT_APP_RAPIDAPI_KEY，值填写你的RapidAPI密钥
  • 变量名：REACT_APP_RAPIDAPI_HOST，值填写对应的主机地址（free-to-play-games-database.p.rapidapi.com）

3. 重新触发部署 #

配置完环境变量后，进入项目的部署（Deploys）页面，点击触发部署 -> 部署站点，让Netlify使用新的环境变量重新打包项目。

4. 验证修复结果 #

部署完成后，打开线上站点，检查API请求的URL是否恢复正常，确认请求能成功发送并获取数据。

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