Express中Passport Local-Auth Cookie无法在Vue3+Axios应用中设置

核心原因及修复方案 #

1. Session Cookie的SameSite属性未配置 #

现代浏览器对跨域Cookie的SameSite属性有严格限制，后端session配置未明确指定该属性时，跨域场景下Cookie会被浏览器拦截。

修改server.js中的session配置：

app.use(
  session({
    secret: "secretcode",
    resave: false, // 优化：关闭不必要的session重存
    saveUninitialized: false, // 优化：避免存储未初始化的session
    cookie: {
      maxAge: 24 * 60 * 60 * 1000, // 设置Cookie有效期1天
      sameSite: "none", // 跨域场景必须设置为none
      secure: process.env.NODE_ENV === "production", // 生产环境开启HTTPS强制，本地HTTP关闭
      httpOnly: true // 保持开启，防止XSS攻击
    }
  })
)

2. 确保Axios凭证配置全局生效 #

虽然请求中已添加withCredentials: true，建议全局配置Axios避免遗漏：

// 在Vue3入口文件（如main.js）中添加
import axios from 'axios'
axios.defaults.withCredentials = true

3. 严格匹配CORS的Origin地址 #

确保后端CORS的origin与Vue3应用地址完全一致，避免localhost和127.0.0.1的差异导致校验失败：

app.use(
  cors({
    origin: "http://localhost:5173", // 精确匹配Vue3运行地址
    credentials: true,
  })
)

4. 调试验证步骤 #

• 打开浏览器开发者工具Application标签，查看Cookies栏是否存在connect.sid（Passport默认session Cookie）。
• 在Network标签中检查登录请求的响应头，确认Set-Cookie字段及其中的SameSite、Secure属性是否正确。
• 查看控制台是否有跨域相关的错误提示。

额外优化建议 #

• 保持resave和saveUninitialized为false，符合Passport session最佳实践，减少无效存储。
• 生产环境必须开启secure: true，确保Cookie仅通过HTTPS传输。

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