全栈项目部署后Cookie刷新消失且无法通过document.cookie访问

• 项目情况：刚完成的全栈宠物网站，本地运行正常；前端部署在Netlify，后端基于Express部署在Railway，前端使用React
• 预期流程：用户注册/登录成功后，后端发送名为auth-token的JWT Cookie，前端解码Cookie中的用户信息并更新UI展示登录状态
• 部署后异常：输入正确凭证后收到登录成功提示（响应码200），但前端无法获取Cookie更新UI；Chrome开发者工具Application标签可见auth-token Cookie，但控制台执行document.cookie返回空字符串，刷新页面后Cookie消失；推测是依赖document.cookie获取值为空导致功能失效

相关代码 #

Server.js #

const express = require("express");
const cors = require("cors");
const db = require("./db");
const cookieParser = require("cookie-parser");
const dotenv = require("dotenv");

dotenv.config();

const app = express();

// CORS配置
const corsOptions = {
  origin: process.env.CLIENT_ORIGIN, // 前端地址
  credentials: true,
};
app.use(cors(corsOptions));

app.use(cookieParser());

const authRouter = require("./routes/auth");
const favoritesRouter = require("./routes/favorites");

db.connect((err) => {
  if (err) {
    console.log(err);
  } else {
    console.log("MySQL Connected...");
  }
});

// 解析表单数据
app.use(express.urlencoded({ extended: false }));
// 解析JSON数据
app.use(express.json());

app.use("/auth", authRouter);
app.use("/favorites", favoritesRouter);

const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log("Server started");
});

authController.js #

exports.login = (req, res) => {
  const { email, password } = req.body;

  db.query("SELECT * FROM users WHERE email = ?", [email], (error, result) => {
    if (error) {
      console.log(error);
      return res.status(500).json({ message: "Internal server error" }); // 处理数据库错误
    }

    if (result.length === 0) {
      return res.status(400).json({ message: "User not found" });
      // 处理用户不存在情况
    }

    const user = result[0];
    const passswordFromDb = user.password;

    bcrypt.compare(password, passswordFromDb).then((match) => {
      if (!match) {
        return res.status(400).json({ message: "Incorrect password" });
      } else {
        const accessToken = createToken(user);

        res.cookie("access-token", accessToken, {
          maxAge: 60 * 60 * 24 * 30 * 1000,
          secure: true,
          sameSite: "None",
        });

        return res.status(200).json({ message: "logged in" });
      }
    });
  });
};

LogIn.js #

const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await fetch(
        `${process.env.REACT_APP_BACKEND_URL}/auth/login`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(formData),
          credentials: "include",
        }
      );

      const responseData = await response.json();
      alert(responseData.message);

      if (response.ok) {
        const accessTokenCookie = document.cookie
          .split("; ")
          .find((cookie) => cookie.startsWith("access-token="));

        if (accessTokenCookie) {
          const accessToken = accessTokenCookie.replace("access-token=", "");
          const decodedCookie = jwt(accessToken);

          ctx.setUser({
            id: decodedCookie.id,
            email: decodedCookie.email,
            username: decodedCookie.username,
          });
          navigate("/");
        }
      } else {
        console.log("Login failed");
      }
    } catch (err) {
      console.error("Error:", err);
    }
  };

排查方向 #

• 检查Cookie的HttpOnly属性：当前代码未显式设置HttpOnly: false，如果该属性为true，document.cookie无法读取Cookie。需在res.cookie配置中添加HttpOnly: false（因为你需要前端读取Cookie）。
• 补充Cookie的domain属性：部署后前后端域名不同，需明确设置Cookie的domain为后端域名或父域名，确保前端能正确匹配Cookie。
• 验证secure属性的环境适配：secure: true仅在HTTPS环境生效，确认后端Railway和前端Netlify均为HTTPS环境，避免因协议不匹配导致Cookie失效。
• 核对CORS的origin配置：检查process.env.CLIENT_ORIGIN是否为前端Netlify的完整HTTPS域名，origin不匹配会导致Cookie无法被前端读取。
• 调整前端获取Cookie的时机：登录请求完成后，Cookie可能未立即被浏览器写入就执行读取操作。可尝试延迟读取，或改为后端响应直接返回用户信息（无需前端读取Cookie）来更新UI，后续请求依赖Cookie自动携带。
• 检查Cookie的path设置：默认路径为/，如果后端路由有特定前缀，需确保Cookie的path设置正确，避免路径不匹配导致Cookie无法访问。

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