本地环境下NodeJS的Cookie认证请求异常问题排查

我在本地localhost环境尝试用Cookie实现身份认证，登录接口返回的响应Cookie正常，但后续请求携带的Cookie却异常。该流程在Postman中可正常运行，浏览器中出问题，且已确认CORS配置无错误。

客户端登录请求代码 #

const onSubmit = async (values, actions) => {
  const apiUrl = ${import.meta.env.VITE_API_ENDPOINT}/users/login;
  setLoader(true)
  try {
    const response = await axios.post(apiUrl, JSON.stringify(values), {
      headers: {"Content-Type": "application/json"}
    });
    if ((response.status >= 200 && response.status < 300)) {
      actions.resetForm();
    }
  } catch (e) {
    console.error(e.response);
  } finally {
    setLoader(false)
  }
};

服务端登录接口代码 #

user.post("/login", async (req, res) => { 
  try { 
    const {usernameEmail, password} = req.body;
    const user = await UserModel.findOne({
      $or: [
        {username: usernameEmail},
        {email: usernameEmail},
      ]
    })
    if (!user) {
      console.error("user not found.")
      return res
        .status(401)
        .json({error: "User not found."})
    }
    const isPasswordValid = await bcrypt.compare(password, user.password);
    if (!isPasswordValid) {
      console.error("wrong password.")
      return res
        .status(401)
        .json({error: "Wrong username/email or password"})
    }
    const token = jwt.sign({
      _id: user._id,
      role:user.role
    }, process.env.JWT_PRIVKEY, {expiresIn: "1h"});
    res.cookie(process.env.USER_COOKIE, token, {httpOnly: false, secure: false, sameSite: "none"});
    return res
      .status(200)
      .json({message: "login success."})
  } catch (e) {
    res
      .status(500)
      .json({error: `internal server error, ${e}`});
  }
})

服务端.env配置 #

USER_COOKIE=415a9787d1c9c83cad7249d44aa987d4804dd6b22c27714c404c40a5ee70d48c
JWT_PRIVKEY=fb44265e9f2d4d26e435194acea0e40d08f6b36cdcd1d24eb2f6e07de032572f

问题现象 #

1. 登录接口返回的响应Cookie正常：

{"Response cookies": {"415a9787d1c9c83cad7249d44aa987d4804dd6b22c27714c404c40a5ee70d48c": {"path": "/","samesite": "None","value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NWRlNmNiYzRiZGY4ZjRiMWEwYjEzMmYiLCJyb2xlIjoiYWRtaW4iLCJpYXQiOjE3MDkzOTg5NTMsImV4cCI6MTcwOTQwMjU1M30.kDi0sSxNO6dr2-m9RGfWDOW87ek5dEl6b-J-g6Nlphc"}}}

2. 执行验证请求时，携带的Cookie异常（并非登录返回的Cookie）：

{ "Request cookies": { "{c0f94d00-d374-4ba9-a5eb-363f33ff13b6}": "value" } }

3. 验证请求代码：

const fetchUserData = async () => {
  const apiUrl = ${import.meta.env.VITE_API_ENDPOINT}/users/verify;  
  try {
    const response = await axios(apiUrl,{},{
      withCredentials: true,
      credentials: "include",
    });
    if ((response.status >= 200 && response.status < 300)) {
      console.log(response.data);
      setIsAuthorize(true);
    }
    console.log(response)
  } catch (e) {
    console.log(e.response)
  }
}

解决方案 #

1. 修复Axios请求参数格式错误 #

验证请求的Axios调用格式错误，正确格式应为axios(url[, config])，你把空对象作为第二个参数，导致配置未生效：

// 修正后的验证请求代码
const fetchUserData = async () => {
  const apiUrl = ${import.meta.env.VITE_API_ENDPOINT}/users/verify;  
  try {
    const response = await axios(apiUrl, {
      withCredentials: true,
      credentials: "include",
    });
    // ...后续逻辑
  } catch (e) {
    console.log(e.response)
  }
}

2. 登录请求添加凭证配置 #

登录请求同样需要开启withCredentials: true，否则浏览器不会保存服务端返回的Cookie：

// 修正后的登录请求代码
const response = await axios.post(apiUrl, JSON.stringify(values), {
  headers: {"Content-Type": "application/json"},
  withCredentials: true // 新增该行
});

3. 调整Cookie的SameSite与Secure配置（适配本地环境） #

本地环境使用http协议时，sameSite: "none"需要搭配secure: true（仅HTTPS环境生效），浏览器会因此拒绝保存Cookie。建议根据环境动态配置：

// 服务端Cookie配置修改
res.cookie(process.env.USER_COOKIE, token, {
  httpOnly: false,
  secure: process.env.NODE_ENV === 'production', // 生产环境HTTPS下开启
  sameSite: process.env.NODE_ENV === 'production' ? "none" : "lax",
  path: "/" // 显式指定Cookie生效路径，避免路径匹配问题
});

4. 确认CORS配置的凭证支持 #

服务端CORS配置不能使用通配符*作为origin，必须指定前端具体域名，同时开启credentials: true：

// Express框架示例配置
const cors = require('cors');
app.use(cors({
  origin: process.env.FRONTEND_URL, // 例如http://localhost:5173
  credentials: true
}));

总结 #

核心问题是Axios请求参数格式错误导致凭证配置未生效，加上本地环境SameSite配置的兼容性问题，调整后即可让浏览器正确保存并携带Cookie。

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