Github Pages访问Heroku后端遭遇CORS问题求助

阿华AIGC实验室

2026-5-14

解决你的CORS问题：几个关键排查点

咱们先从最容易忽略的几个地方入手，你当前的配置看起来存在几个潜在的冲突和遗漏：

1. 前端请求的URL是否指向了正确的后端服务？

你的React代码里用了axios.get('/current_user')，如果是部署在https://username.github.io的静态页面，这个请求默认会发送到当前域名（也就是github.io的根路径），而不是你的Node.js后端！这绝对会触发CORS错误，因为github.io的服务器不会给你设置Access-Control-Allow-Origin响应头。

解决办法：

给axios全局配置正确的后端API地址，或者在单个请求里指定完整URL，同时开启凭证传递：

// 全局配置示例（在React项目的入口文件比如index.js里）
import axios from 'axios';
axios.defaults.baseURL = 'https://your-node-backend-domain.com'; // 替换成你的后端实际域名
axios.defaults.withCredentials = true; // 必须开启，因为你用了cookie session

// 或者单个请求里指定
export const checkAuth = () => dispatch => {
  axios.get('https://your-node-backend-domain.com/current_user', { withCredentials: true })
    .then(res => { /* 处理逻辑 */ })
    .catch(err => console.log({ err }));
}

2. 后端CORS配置的冲突与不规范

你同时使用了cors中间件和自定义的响应头中间件，这很容易导致配置冲突。而且cors()默认的Access-Control-Allow-Origin: *和Access-Control-Allow-Credentials: true是不兼容的——浏览器会直接拒绝这种组合，必须指定具体的前端源地址！

解决办法：

移除自定义的响应头中间件，改用cors中间件的配置项统一设置，这样更清晰也不会冲突：

// 替换原来的app.use(cors())和自定义header中间件
app.use(cors({
  origin: 'https://username.github.io', // 明确指定你的前端源地址，不要用*
  credentials: true,
  methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept', 'content-type', 'application/json']
}));

这样cors中间件会自动处理所有CORS相关的逻辑，包括预请求（OPTIONS）的响应头。

你的cookieSession里的maxAge计算有误：

maxAge: 30 * 24 + 60 * 60 * 1000, //30 days

这个计算结果是3600720毫秒（大约1小时），根本不是30天！正确的计算应该是：

maxAge: 30 * 24 * 60 * 60 * 1000, // 30天的毫秒数

虽然这个不直接导致CORS，但如果session很快过期，会影响后续的认证请求。

4. 中间件顺序是否正确

确保cors中间件是第一个被加载的，放在所有其他中间件（比如bodyParser、cookieSession、passport）之前，这样它能处理所有请求的CORS头，包括预请求：

const app = express();
// 先加载cors中间件
app.use(cors({ /* 你的配置项 */ }));
// 然后加载其他中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieSession({ /* 修正后的maxAge配置 */ }));
app.use(passport.initialize());
app.use(passport.session());
// 最后加载路由
require('./routes/auth')(app);
require('./routes/game')(app);