Next.js+Express项目仅Chrome无法保留Cookie问题求助

开发Next.js应用时，发现登录操作在Safari中能正常保留服务器下发的Cookie，但Chrome完全无法保留。

服务器配置代码 #

const corsOptions = {
    origin: config.get("frontendUrl"), //http://localhost:3000
    credentials: true,
};

app.use(cors(corsOptions));
app.use(cookieParser());
app.use(express.json());

app.use("/api/auth", authRouter);
//other routes...

登录路由代码 #

router.post("/", async (req, res) => {
  //validation...

  const accessToken = user.generateAccessToken();
  const refreshToken = user.generateRefreshToken();

  return res
    .cookie("accessToken", accessToken, {
      httpOnly: true,
      sameSite: "none",
      secure: config.get("isSecure"), //false
    })
    .cookie("refreshToken", refreshToken, {
      httpOnly: true,
      sameSite: "none",
      secure: config.get("isSecure"), //false
    })
    .sendStatus(200);
});

问题原因及修复方案 #

问题核心在于Chrome对SameSite=None和secure属性的强制关联规则：当Cookie设置sameSite: "none"时，Chrome要求必须同时开启secure: true，否则会直接拒绝保存Cookie；而Safari在本地HTTP环境下允许sameSite=None搭配secure: false，因此能正常工作。

1. 本地开发环境修复 #

将sameSite属性改为"lax"或"strict"，同时保持secure: false（本地HTTP环境不需要secure属性），修改后的Cookie配置示例：

.cookie("accessToken", accessToken, {
  httpOnly: true,
  sameSite: "lax", // 替换为lax或strict
  secure: config.get("isSecure"), //false
})

2. 生产环境配置 #

确保生产环境使用HTTPS协议，此时设置secure: true，同时保留sameSite: "none"，即可兼容Chrome和Safari：

.cookie("accessToken", accessToken, {
  httpOnly: true,
  sameSite: "none",
  secure: true,
})

3. 前端请求补充配置 #

前端发送登录请求时，必须带上credentials参数以携带Cookie：

• 若使用axios：

  axios.post('/api/auth', loginData, { withCredentials: true })
  

• 若使用Next.js的fetch：

  fetch('/api/auth', {
    method: 'POST',
    credentials: 'include',
    // 其他请求配置
  })
  

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