GitHub Pages中API调用失效求助：本地VS Code运行正常

问题背景 #

完成的新闻网站在localhost环境运行正常，但部署到GitHub Pages后API调用失效。相关信息：

• 仓库地址：Express-Time-News仓库
• 已部署站点：GitHub Pages站点
• 本地运行效果：VS Code localhost展示截图

核心原因 #

GitHub Pages是静态文件托管服务，仅能托管HTML、CSS、JS等静态资源，无法运行Node.js/Express后端代码。如果你的API依赖本地Express服务提供，部署后这个后端服务不存在，必然导致调用失败。此外还可能存在两个常见问题：

• API请求地址配置错误：本地使用localhost:xxxx这类地址，部署后未替换为可访问的公网API地址
• CORS跨域限制：若调用第三方新闻API，对方可能未允许GitHub Pages域名的跨域请求

解决方案 #

1. 分离前后端部署 #

将Express后端部署到支持Node.js的平台（如Vercel、Railway、Heroku等），然后修改前端代码中的API请求地址：

// 区分开发/生产环境的API地址
const BASE_URL = process.env.NODE_ENV === 'production' 
  ? 'https://your-deployed-backend-domain/api' 
  : 'http://localhost:3000/api';

这样本地开发时使用localhost地址，生产环境自动切换到后端公网地址。

2. 处理第三方API跨域问题 #

如果调用的是第三方API且存在CORS错误：

• 推荐方案：通过自己的后端代理请求，由后端转发API请求给第三方服务，前端只请求自己的后端地址，避免跨域限制
• 临时方案：使用CORS代理服务（仅适合测试，生产环境不推荐，存在安全风险）

3. 确认GitHub Pages部署配置 #

检查仓库的GitHub Pages设置：

• 确认部署分支为gh-pages或包含前端打包产物（如dist/build目录）的分支
• 确认打包后的静态文件已正确上传到部署分支

验证步骤 #

部署修改后的代码后，打开浏览器开发者工具（F12）的Network标签：

• 若API请求返回404：检查BASE_URL是否配置正确
• 若返回CORS相关错误：按照跨域解决方案调整

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