Docker部署Angular+NodeJS/Express应用的Cookie会话令牌异常问题

问题现象 #

• 基于Angular+Node.js/Express的Web应用本地运行正常，Docker部署后出现Cookie会话异常：
  • 登录时浏览器网络请求显示后端已返回sessionId Cookie，但浏览器未保存该Cookie
  • 手动添加Cookie后，前端请求不会将其回传给后端，后端authorize方法中request.cookies.sessionId打印为undefined
• 直接在浏览器访问localhost:3000/api/auth（持有Cookie时）返回true，但Docker容器内的前端请求该接口返回false
• 已尝试配置Nginx CORS但未解决问题

相关代码片段 #

前端登录代码（Angular） #

public login(email: string, password: string): Observable<ResponseMessage> {
  const loginObservable = this.http.post<ResponseMessage>(this.server + '/api/login', {
    email: email,
    password: password
  }).pipe(shareReplay());
  loginObservable.subscribe({
    next: () => {
      this.loggedIn = true;
    },
    error: () => {
      this.loggedIn = false;
    }
  });
  return loginObservable;
}

后端生成Cookie代码（Node.js/Express） #

private async generateSession(user:User, response:Response): Promise<void>{
    try{
      const sessionId = uid.sync(24);
      await user.createSession({sessionId: sessionId});
      response.cookie('sessionId', sessionId, { httpOnly: true, maxAge: 1000 * 60 * 60 * 24 });
      return;
    }catch(err){
      console.error(err);
    }
  }

后端授权校验代码（Node.js/Express） #

public async authorize(request: Request, response: Response, next: NextFunction): Promise<void> {
    try{
      const sessionId = request.cookies.sessionId;
      console.log(request.cookies.sessionId);        // Docker部署时打印undefined
      if (!sessionId) return next();
      const session:Session = await Session.findOne({
        where: {
          sessionId: sessionId
        },
      });
      if (!session) return next();
      response.locals.session = session;
      // 检查会话是否关联用户
      const user:User = await session.getUser();
      if (!user) return next();
      response.locals.user = user;
      return next();
    }catch(err){
      console.error(err);
    }
  }

尝试过的Nginx CORS配置 #

# CORS settings
add_header 'Access-Control-Allow-Origin' 'localhost';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization, Credentials';
add_header 'Access-Control-Allow-Credentials' 'true';

解决方案 #

1. Angular HTTP请求添加凭据配置 #

Angular的HttpClient默认不会携带Cookie，需在所有需要授权的请求中添加withCredentials: true：

public login(email: string, password: string): Observable<ResponseMessage> {
  const loginObservable = this.http.post<ResponseMessage>(this.server + '/api/login', {
    email: email,
    password: password
  }, { withCredentials: true }).pipe(shareReplay());
  loginObservable.subscribe({
    next: () => {
      this.loggedIn = true;
    },
    error: () => {
      this.loggedIn = false;
    }
  });
  return loginObservable;
}

其他需要携带Cookie的接口请求（如/api/auth）也需添加该配置。

2. 修正Nginx CORS配置 #

• Access-Control-Allow-Origin不能设为localhost，需改为前端实际访问的完整地址（如http://localhost:4200），且不能使用通配符*（启用Allow-Credentials时不允许）
• 补充OPTIONS请求的处理规则，确保预请求能正确返回CORS头：

# CORS settings
if ($request_method = OPTIONS) {
    add_header 'Access-Control-Allow-Origin' 'http://localhost:4200';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Content-Length' 0;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    return 204;
}
add_header 'Access-Control-Allow-Origin' 'http://localhost:4200';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
add_header 'Access-Control-Allow-Credentials' 'true';

3. 调整后端Cookie属性 #

Docker部署时，若前后端跨端口/域名访问，需补充Cookie的sameSite属性，生产环境使用HTTPS时需开启secure：

response.cookie('sessionId', sessionId, { 
  httpOnly: true, 
  maxAge: 1000 * 60 * 60 * 24,
  sameSite: 'Lax', // 跨域场景可设为'None'，但需配合secure
  secure: process.env.NODE_ENV === 'production'
});

注意：设置sameSite: 'None'时必须开启secure，否则浏览器会拒绝保存Cookie。

4. 检查Docker网络配置 #

确保前端和后端容器处于同一Docker网络，前端请求后端时使用容器服务名（而非localhost）作为地址，比如http://backend:3000，避免跨域解析异常。

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