本地Create React App运行正常，Vercel部署失败及报错求助

核心问题拆解 #

从报错信息看，主要是两个连锁问题：

1. NewsAPI请求返回426状态码：这是「Upgrade Required」错误，说明部署到Vercel后，请求NewsAPI的方式不符合服务器要求，直接导致请求失败。
2. 数据未正确获取引发的map报错：因为API请求失败，你要遍历的数组变成了undefined，调用map时就抛出了类型错误。其他几个报错都是这两个问题引发的连锁反应。

具体修复步骤 #

1. 解决NewsAPI的426请求错误 #

• 移除硬编码的API密钥：把代码里直接写死的apiKey=a1ec1c47dff64cc1a11743631374ff5e换成Vercel环境变量。在Vercel项目的「Settings」→「Environment Variables」里添加REACT_APP_NEWS_API_KEY，值填你的API密钥，代码里用process.env.REACT_APP_NEWS_API_KEY调用。
• 强制使用HTTPS请求：本地用HTTP可能能正常请求，但部署到Vercel后必须用HTTPS发起请求，检查代码里的API地址是不是https://newsapi.org/...，别写成HTTP。
• 用Serverless函数转发请求：直接在前端请求NewsAPI容易触发平台限制或暴露密钥。写一个简单的Serverless函数（比如pages/api/news.js），在函数内部发起NewsAPI请求，前端请求这个内部接口：

// pages/api/news.js
export default async function handler(req, res) {
  const { country, page } = req.query;
  const apiKey = process.env.REACT_APP_NEWS_API_KEY;
  const response = await fetch(`https://newsapi.org/v2/top-headlines?country=${country}&apiKey=${apiKey}&page=${page}`);
  const data = await response.json();
  res.status(response.status).json(data);
}

然后前端请求地址改成/api/news?country=in&page=1。

2. 修复map的类型错误 #

在所有用到map遍历API返回数据的地方，加上空值保护：

• 用可选链操作符：{articles?.map(item => ...)}
• 或者给数组设默认值：{(articles || []).map(item => ...)}
• 同时添加加载状态和错误提示，比如请求未完成时显示加载中，请求失败时展示错误信息，避免组件在数据异常时崩溃。

3. 解决异步响应的报错 #

发起API请求时，用AbortController取消未完成的请求，避免组件卸载后请求仍在进行导致报错：

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  fetch('/api/news?country=in&page=1', { signal })
    .then(res => res.json())
    .then(data => setArticles(data.articles))
    .catch(err => {
      if (err.name !== 'AbortError') {
        // 处理请求失败逻辑
      }
    });

  return () => controller.abort(); // 组件卸载时取消请求
}, []);

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