React应用部署在GitHub Pages，与Heroku上的Node.js后端能否正常通信？

云原生阿岚

2026-8-4

可行，这种架构完全可以正常工作

核心逻辑合理性：GitHub Pages托管的React应用是纯静态前端，本质是浏览器中运行的JS代码，通过axios发起的HTTP请求（POST/GET等）和普通前端调用后端接口无区别，只要后端服务配置正确，就能正常通信并从数据库获取数据。
跨域问题处理：必须在Heroku的Node.js后端配置CORS（跨域资源共享），允许你的GitHub Pages域名（如xxx.github.io）访问接口。可以用cors npm包快速实现，示例代码：
```
const express = require('express');
const cors = require('cors');
const app = express();

// 允许指定GitHub Pages域名跨域
app.use(cors({
  origin: 'https://your-username.github.io'
}));
```
后端部署注意事项：Heroku上的Node.js服务要监听process.env.PORT环境变量指定的端口，不能硬编码端口；MySQL数据库可通过Heroku的Add-ons（如ClearDB）配置，或使用外部数据库服务，连接字符串需设为环境变量，避免硬编码泄露信息。
请求路径配置：React中的axios请求要使用Heroku后端的完整域名（如https://your-heroku-app-name.herokuapp.com/api/xxx），不要用相对路径，确保前端能正确指向后端服务。