Vite+React集成RapidAPI部署至Netlify后出现403错误求助

AI 小北

2026-7-13

问题解决：Netlify部署后RapidAPI 403错误及e.slice报错

核心问题分析

本地运行正常但Netlify部署后出现e.slice is not a function，本质是RapidAPI返回403状态码（提示“您未订阅该API”），导致后续代码处理错误数据时触发异常。

解决方案步骤

1. 确认Netlify环境变量配置

Vite要求环境变量以VITE_开头，需在Netlify后台正确配置：

进入Netlify项目的「Site settings」→「Environment variables」
添加变量VITE_RAPID_API_KEY，值与本地.env文件中的密钥完全一致（注意大小写匹配）
重新部署项目，确保变量生效

2. 验证RapidAPI订阅与配额

登录RapidAPI后台，检查exercisedb.p.rapidapi.com和youtube-search-and-download.p.rapidapi.com两个API的订阅状态，确认未过期、配额未耗尽
确保当前使用的API密钥所属账号已订阅这两个API（部分API需要单独订阅）

3. 添加请求错误处理（解决slice报错）

原fetchData函数未处理HTTP错误，导致403响应的错误数据进入后续逻辑触发异常，修改代码如下：

export const fetchData = async (url, options) => {  
    const response = await fetch(url, options);
    // 检查请求是否成功
    if (!response.ok) {
        throw new Error(`请求失败: ${response.status} - ${response.statusText}`);
    }
    const data = await response.json();
    return data;
}

在调用fetchData的地方添加异常捕获：

try {
  const exerciseData = await fetchData('你的API地址', exerciseOptions);
  // 正常处理数据逻辑
} catch (err) {
  console.error(err);
  // 给用户展示错误提示（比如弹窗、页面提示）
}