Heroku分离部署Express与Angular时，如何从Angular访问req.session

嘿，这个跨域下的session共享问题我太熟了！你现在的核心问题出在CORS配置的细节和跨域cookie的设置上，我一步步给你捋清楚：

你当前设置的Access-Control-Allow-Origin: '*'是无效的——当你开启Access-Control-Allow-Credentials: true时，浏览器的安全策略不允许Origin用通配符*，必须指定具体的前端域名。

调整后的CORS配置应该是这样的：

// 用环境变量存前端域名，方便生产/开发环境切换
const allowedOrigins = [process.env.FRONTEND_URL]; // 比如 "https://your-angular-app.herokuapp.com"

app.use(function(req, res, next) {
  const origin = req.headers.origin;
  // 只允许指定的前端域名跨域
  if (allowedOrigins.includes(origin)) {
    res.header("Access-Control-Allow-Origin", origin);
  }
  res.header("Access-Control-Allow-Credentials", true);
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept');
  
  // 处理OPTIONS预检请求，直接返回200
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

跨域场景下，session依赖的Cookie必须设置正确的sameSite和secure属性，否则浏览器不会携带Cookie到后端。

假设你用的是express-session，配置如下：

const session = require('express-session');

// 一定要信任Heroku的反向代理，否则Cookie的secure属性会失效
app.set('trust proxy', 1);

app.use(session({
  secret: process.env.SESSION_SECRET, // 用环境变量存密钥，别硬编码！
  resave: false,
  saveUninitialized: false,
  cookie: {
    secure: process.env.NODE_ENV === 'production', // 生产环境必须开HTTPS，所以设为true
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax', // 跨域必须设为none
    maxAge: 24 * 60 * 60 * 1000 // Cookie有效期，按需调整
  }
}));

⚠️ 注意：Heroku的dyno是无状态的，默认的内存session存储会在dyno重启时丢失数据。建议用connect-redis这类持久化存储（Heroku有Redis add-on可以直接用）。

Angular默认不会在跨域请求中携带Cookie，你需要全局或单个请求开启withCredentials：

全局配置（推荐，一次设置所有请求生效） #

在app.module.ts中添加一个HTTP拦截器：

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class CredentialsInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 克隆请求并开启withCredentials
    const clonedReq = req.clone({ withCredentials: true });
    return next.handle(clonedReq);
  }
}

@NgModule({
  imports: [HttpClientModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: CredentialsInterceptor, multi: true }
  ]
})
export class AppModule { }

单个请求设置 #

如果只需要部分请求携带Cookie，可以在请求时单独配置：

this.http.get('https://your-express-backend.herokuapp.com/api/your-endpoint', { withCredentials: true })
  .subscribe(response => {
    // 处理响应
  });

完成以上配置后，你可以在Express的接口中打印req.session，看看是否能拿到数据；同时在浏览器的开发者工具→Application→Cookies中，检查后端域名下的session Cookie是否存在，并且SameSite属性是None，Secure是true。

这样调整后，Angular前端就能正常访问Express的req.session啦！

内容的提问来源于stack exchange，提问作者Sherwin Ablaña Dapito