Angular 15无法自动向Node.js/Express服务器发送Cookie的原因排查

环境配置 #

• 前端：Angular 15
• 后端：Node.js 18.10.0 + Express 4.17.2

问题描述 #

登录后服务器通过Set-Cookie头成功将认证Token存入浏览器Cookie（可在开发者工具Application面板查看），但后续请求无法自动携带该Cookie至服务器，已配置CORS和Angular拦截器但未生效。

已做配置 #

服务器端CORS响应头配置 #

res.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("Allow-Origin-With-Credentials", "true");
res.setHeader(
  "Access-Control-Allow-Headers",
  "Origin, X-Requested-With, Content-Type, Accept, X-XSRF-TOKEN, Cookie"
);
res.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, DELETE, PUT, OPTIONS");

Angular请求拦截器配置 #

intercept(req: HttpRequest<any>, next: HttpHandler) {
    return next.handle(
      req.clone({
        withCredentials: true,
      })
    );
}

登录接口生成并设置Token代码 #

exports.userSignIn = async (req, res) => {
  try {
    const user = await User.findOne({ where: { email: req.body.email } });

    if (user) {
      bcrypt.compare(req.body.password, user.password, async (error, same) => {
        if (!error) {
          if (same) {
            const token = jwt.sign(
              {
                name: user.name,
                phoneNumber: user.phoneNumber,
                email: user.email,
                id: user.id,
              },
              jwtUserSecret,
              {
                expiresIn: "24h",
              }
            );

            res.cookie("XSRF-TOKEN", token, { maxAge: 86400000 });

            res.status(200).json({
              emailExistance: true,
              passwordValid: true,
              expiresIn: 86400,
            });
          } else {
            res.status(401).json({
              emailExistance: true,
              passwordValid: false,
              expiresIn: null,
            });
          }
        } else {
          throw error;
        }
      });
    } else {
      res.status(401).json({
        emailExistance: false,
        passwordValid: null,
        expiresIn: null,
      });
    }
  } catch (error) {
    console.error(error);

    res.status(401).json({
      emailExistance: null,
      passwordValid: null,
      expiresIn: null,
    });
  }
};

相关截图 #

问题原因与解决步骤 #

核心原因 #

浏览器自动携带Cookie需要满足Cookie属性与请求场景匹配，当前配置中Cookie缺少关键属性，导致跨端口请求时浏览器未触发自动携带逻辑。

解决步骤 #

1. 完善Cookie设置属性
   修改登录接口中res.cookie的配置，补充sameSite、domain、path等必要属性，适配跨端口/跨域场景：

   res.cookie("XSRF-TOKEN", token, { 
     maxAge: 86400000,
     sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax', // 生产环境用None（需配合secure），本地开发用Lax
     secure: process.env.NODE_ENV === 'production', // 生产环境开启HTTPS时设为true
     domain: 'localhost', // 本地开发域名，生产环境替换为实际域名
     path: '/', // 确保Cookie在全站路径下有效
     httpOnly: true // 可选，设为true可防止XSS攻击，不影响自动携带
   });
   

   • 本地HTTP环境下，sameSite设为Lax即可；生产HTTPS环境必须设为None且开启secure，否则浏览器会拒绝携带Cookie。
   • domain设为localhost可允许跨端口（如4200和3000）的请求自动携带Cookie。

2. 清理无效CORS头
   移除服务器端多余的Allow-Origin-With-Credentials响应头，该头并非标准CORS字段，仅保留Access-Control-Allow-Credentials: true即可。

3. 验证拦截器生效
   确保Angular拦截器已正确注册到app.module.ts的providers数组中，保证所有请求都带上withCredentials: true。

4. 检查浏览器设置
   确认浏览器未开启第三方Cookie拦截功能（本地localhost场景下默认不会拦截，但需确保浏览器隐私设置为默认）。

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