前端Axios无法存储服务器Cookie及部署后多异常求助

环境背景 #

• 后端：express-session（1.5.0+，无需cookie-parser），会话存储于ElephantSQL托管的PostgreSQL，部署在Railway（地址：https://tradenow-authentication-production.up.railway.app/api），已配置CORS及req.body处理
• 前端：React + Axios发起POST请求

异常1：登录时浏览器无法存储Cookie，数据库生成2个会话（本地正常） #

核心原因

跨域请求未正确配置凭证传递，加上Railway反向代理导致会话Cookie属性异常，同时OPTIONS预检请求可能被创建额外会话。

修复步骤

1. 前端Axios配置：确保请求携带凭证，在Axios实例或单个请求中添加withCredentials: true

// Axios实例配置示例
const api = axios.create({
  baseURL: 'https://tradenow-authentication-production.up.railway.app/api',
  withCredentials: true // 关键：允许携带跨域Cookie
});

// 登录请求示例
api.post('/login', { username, password })
  .then(res => console.log(res))
  .catch(err => console.error(err));

2. 后端CORS配置：禁止使用通配符*作为origin，指定前端实际域名，并开启credentials

const cors = require('cors');
app.use(cors({
  origin: 'https://your-frontend-domain.com', // 替换为你的前端实际地址
  credentials: true // 允许跨域传递凭证
}));

3. express-session配置：添加trust proxy: true适配Railway反向代理，同时设置Cookie的secure、sameSite属性

const session = require('express-session');
const pgSession = require('connect-pg-simple')(session);

app.use(session({
  store: new pgSession({
    conString: process.env.DATABASE_URL // ElephantSQL连接字符串
  }),
  secret: process.env.SESSION_SECRET,
  resave: false,
  saveUninitialized: false,
  trustProxy: true, // 关键：信任Railway的反向代理
  cookie: {
    secure: true, // 部署环境HTTPS必须开启
    sameSite: 'none', // 跨域场景下设置为none
    maxAge: 24 * 60 * 60 * 1000 // 会话有效期
  }
}));

4. 避免OPTIONS预检生成会话：利用saveUninitialized: false（已在上述配置中开启），未初始化的会话不会存入数据库，直接跳过OPTIONS请求的会话创建逻辑。

异常2：无效用户名/密码返回401而非404（本地正常） #

核心原因

部署环境下错误处理逻辑被中间件覆盖，或数据库查询异常被误判为认证失败。

修复步骤

1. 明确登录接口的错误返回逻辑：确保用户不存在时优先返回404，密码错误返回401

app.post('/api/login', async (req, res) => {
  try {
    const { username, password } = req.body;
    const user = await User.findOne({ where: { username } });
    
    if (!user) {
      // 用户不存在，明确返回404
      return res.status(404).json({ error: 'User not found' });
    }

    const isPasswordValid = await bcrypt.compare(password, user.password);
    if (!isPasswordValid) {
      // 密码错误返回401
      return res.status(401).json({ error: 'Invalid password' });
    }

    // 登录成功，写入会话
    req.session.userId = user.id;
    res.status(200).json({ message: 'Login successful' });
  } catch (err) {
    // 捕获数据库或其他异常，避免误返回401
    res.status(500).json({ error: 'Server error' });
  }
});

2. 排查全局认证中间件：若使用Passport等认证工具，需自定义策略的错误处理，避免将用户不存在的情况统一返回401：

passport.use(new LocalStrategy(
  async (username, password, done) => {
    try {
      const user = await User.findOne({ username });
      if (!user) {
        return done(null, false, { message: 'User not found' }); // 传递用户不存在的信息
      }
      const isValid = await bcrypt.compare(password, user.password);
      if (!isValid) {
        return done(null, false, { message: 'Invalid password' });
      }
      return done(null, user);
    } catch (err) {
      return done(err);
    }
  }
));

// 在登录接口中根据错误信息返回对应状态码
app.post('/api/login', passport.authenticate('local', { session: false }), (req, res) => {
  // 登录成功逻辑
}, (err, req, res, next) => {
  if (err.message === 'User not found') {
    return res.status(404).json({ error: err.message });
  }
  if (err.message === 'Invalid password') {
    return res.status(401).json({ error: err.message });
  }
  res.status(500).json({ error: 'Server error' });
});

异常3：Insomnia请求正常，浏览器异常 #

此问题是浏览器同源策略限制导致，已在异常1的修复步骤中覆盖，只要正确配置Axios的withCredentials、后端CORS及express-session的Cookie属性，浏览器即可正常存储Cookie并维持会话。

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