MERN Stack线上环境：服务器向客户端存储Cookie失败问题排查

问题描述 #

MERN Stack项目本地localhost环境下，Express服务器可正常向React前端存储Cookie，但线上部署后，服务器已返回Cookie但客户端未保存。已使用cookieParser中间件，调整过Cookie属性设置，问题仍未解决，需实现线上环境与本地一致的Cookie存储功能。

相关代码 #

客户端请求代码（React） #

const handleLogin = async (e) => {
    e.preventDefault();
    try {
      setLoading(true);
      const url = '/login';
      const response = await axios.post(
        url,
        {
          email: email,
          password: password,
        },
        {
          withCredentials: true,
        }
      );

      axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.payload}`;

      setHidden(true);
      navigate('/');
    } catch (error) {
      setLoading(false);
      setHidden(false);
      setErrorMsg(error.message);
    }
  };

服务器登录处理函数（Express） #

export const Login = async (req, res) => {
  try {
    const { email, password } = req.body;

    const user = await User.findOne({ email: email });
    if (!user) {
      return response(400, {}, 'Email or password does not match!', res);
    }

    const matchUser = await bcrypt.compare(password, user.password);
    if (!matchUser) {
      return response(400, {}, 'Email or password does not match!', res);
    }

    const ACCESS_TOKEN = accessToken(email);
    const REFRESH_TOKEN = refreshToken(email);

    const addToken = new RefreshToken({
      token: REFRESH_TOKEN,
    });

    await addToken
      .save()
      .then(() => {
        res.cookie('ref_token', REFRESH_TOKEN, {
          sameSite: 'none',
          secure: true,
          maxAge: 7 * 24 * 60 * 60 * 1000,
        });
        response(201, ACCESS_TOKEN, 'Login success!', res);
      })
      .catch((error) => res.send(error));
  } catch (error) {
    console.log(error);
  }
};

服务器配置代码（Express） #

import express from 'express';
import cors from 'cors';
import cookieParser from 'cookie-parser';
import './connection/database.js';
import routes from './routes/routes.js';

const app = express();
const port = 5000;

app.use(cors({ credentials: true, origin: ['https://kutu-buku-apps.vercel.app', 'http://localhost:3000'] }));

app.use(express.json());
app.use(cookieParser());
app.use(routes);

app.listen(port, () => {
  console.log(`Server is up and running at http://localhost:${port}`);
});

export default app;

解决方案 #

• 确认服务器HTTPS环境：Cookie设置了secure: true，该属性要求Cookie只能在HTTPS连接下被存储。如果线上服务器使用HTTP协议，浏览器会直接拒绝保存Cookie。需确保服务器部署在HTTPS环境，可通过部署平台提供的SSL证书或Nginx配置SSL实现。
• 核对CORS的origin配置：确保线上前端的实际访问域名与CORS配置中的origin完全一致，包括是否带www、端口号等。若前端域名有重定向（如Vercel的自动域名跳转），需将最终访问的域名加入origin列表。
• 添加Cookie的domain属性：线上环境中，若前端与服务器为不同域名，需明确设置domain属性。例如服务器域名为api.example.com，前端为example.com，可设置domain: ".example.com"实现跨子域名共享Cookie；若为同域名不同端口，可配置对应域名作为domain值。
• 全局设置axios的withCredentials：当前仅在登录请求中添加了withCredentials: true，后续请求若需携带Cookie，建议全局设置axios.defaults.withCredentials = true，避免单个请求遗漏配置导致Cookie无法携带。
• 处理第三方Cookie限制：若前端与服务器为完全不同的域名，部分浏览器的隐私保护策略会阻止第三方Cookie。可通过反向代理将服务器接口挂载到前端域名的子路径下（如https://kutu-buku-apps.vercel.app/api），使Cookie成为第一方Cookie，避免被浏览器拦截。

内容的提问来源于stack exchange，提问作者Muhammad Abdul Azis