基于NodeJS与Firebase开发登录系统时fetch执行报无效值错误的咨询

Failed to execute 'fetch' on 'Window': Invalid value 的直接触发原因是 Fetch 配置中存在非法类型的取值，对照你的代码，问题出在请求头的CSRF-Token字段：

• 代码中Cookies.get("XSRF-TOKEN")在目标Cookie不存在时会返回undefined
• Fetch 规范强制要求所有请求头的值必须为字符串类型，传入undefined就会直接抛出该无效值报错。

• 给Cookie取值加兜底，避免非字符串值传入请求头
  调整前端fetch的headers配置，对取不到的Cookie值做空值兜底：

  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
    "CSRF-Token": Cookies.get("XSRF-TOKEN") ?? "",
  },
  

• 检查后端CSRF中间件配置，确保XSRF-TOKEN Cookie能被前端正常读取
  你现有代码中未看到CSRF防护的初始化逻辑，若使用csurf实现CSRF校验，需按如下配置保证Cookie可被前端JS读取：

  const cookieParser = require('cookie-parser')
  const csurf = require('csurf')
  
  // 先初始化cookie解析中间件，否则无法读取Cookie值
  app.use(cookieParser())
  // 配置CSRF防护，把token写入前端可读的XSRF-TOKEN Cookie
  const csrfProtection = csurf({
    cookie: {
      name: 'XSRF-TOKEN',
      httpOnly: false, // 必须关闭httpOnly，否则前端JS无法读取该Cookie
      sameSite: 'Lax'
    }
  })
  // 挂载CSRF防护中间件，后续请求会自动校验传入的CSRF-Token
  app.use(csrfProtection)
  

• 兜底排查其他fetch非法值来源
  如果调整后仍报同类错误，逐项校验fetch配置的所有字段：
  • 确认请求方法为合法的大写字符串（当前代码中method: "POST"符合要求）
  • 确认请求体为合法的可序列化类型（当前代码中用JSON.stringify生成字符串body，符合要求）
  • 遍历所有headers，确保每个字段值都是字符串，不存在null/undefined类型取值。

• 现有/sessionLogin接口对req.body.idToken无空值判断，若请求体缺失该字段，直接调用.toString()会抛出后端异常，可补充前置校验：

  app.post("/sessionLogin", (req, res) => {
    const idToken = req.body.idToken?.toString();
    if (!idToken) return res.status(400).send("Missing idToken");
    // 原有createSessionCookie逻辑保持不变
  })
  

• 挂载CSRF中间件后，/sessionLogin接口会自动完成CSRF Token合法性校验，无需手动实现校验逻辑。

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