部署至Vercel后出现Cannot read properties of undefined (reading 'protocol')错误

API 探路者

2026-7-27

解决Vercel部署后无法通过环境变量获取API数据的问题

问题原因

报错TypeError: Cannot read properties of undefined (reading 'protocol')的核心原因是**API_ENDPOINT的值为undefined或无效URL**，导致axios/fetch无法解析请求地址。本地运行正常是因为.env文件中的变量已正确加载，但部署到Vercel时环境变量未正确配置或注入。

解决方案

1. 检查Vercel项目的环境变量配置

登录Vercel控制台，进入目标项目，点击左侧菜单的Settings → Environment Variables
点击Add Environment Variable，添加键为VITE_URL，值为你的完整API地址（例如https://api.example.com/movies），注意不要给值添加引号
确保变量的Environment选项勾选Production（对应生产环境部署），点击Save保存
重新触发部署：在Deployments页面选择最新部署记录，点击Redeploy，或推送新代码触发部署

2. 验证环境变量是否正确注入

在代码中添加日志，部署后查看浏览器控制台输出：

console.log('当前API地址:', import.meta.env.VITE_URL);

如果输出为undefined，说明变量未配置成功；如果是空白或错误地址，修正Vercel中的变量值。

3. 代码层面增加容错处理

避免因变量未定义导致请求失败，同时修正代码中冗余的await（response.data不是Promise，无需异步等待）：

const API_ENDPOINT = import.meta.env.VITE_URL;

const fetchData = async () => {
  try {
    if (!API_ENDPOINT) {
      throw new Error('API地址未配置，请检查环境变量');
    }
    const response = await axios.get(API_ENDPOINT);
    const res = response.data;
    console.log(res);
    setMovie(res.results);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}