Express + React：CSRF Coo​​kie 在生产中未定义，在本地工作

Question

我在 Heroku 上托管我的 Express API ，在 Netlify 上托管我的客户端客户端。当我在本地尝试注册路由时，我的 cookie 已定义且路由有效。然而，当它投入生产时，cookie 总是返回未定义，并且我的 API 超时。

\n\n

请注意，cookie 已从后端成功发送。I\xe2\x80\x99m 能够在开发工具中查看它。此外，cookies,get() 返回一个空对象。

\n\n

I\xe2\x80\x99m 使用 Js-cookie。

\n\n

我在 Gatsby 中使用 js-cookie。我正在使用 CSURF 来表达 cookie。

\n\n

后端：

\n\n

//CSURF Config\napp.use(csurf({ cookie: true }));\n\n\n//Route that generates CSRF Cookie\napp.get("/getToken", (req, res) => {\n    res.cookie("XSRF-TOKEN", req.csrfToken());\n    res.end();\n  });\n

\n\n

前端：

\n\n

我包括整个注册功能。请注意，这是两个端点调用，一个用于检索 cookie，另一个用于创建用户记录。

\n\n

  userSignUp = async (email, password, resetForm) => {\n    console.log("THis is a test of the emergency..")\n    await fetch(process.env.API + "getToken", {\n      mode: "cors", // no-cors, cors, *include\n      cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached\n      credentials: "include", // include, *include, omit\n      headers: {\n        "content-type": "application/json",\n      },\n      method: "GET",\n    })\n    const token = Cookies.get("XSRF-TOKEN")\n    alert(Cookies.get("XSRF-TOKEN"))\n    const data = await fetch(process.env.API + "signUp", {\n      body: JSON.stringify({ email: email, password: password }),\n      mode: "cors", // no-cors, cors, *include\n      cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached\n      credentials: "include", // include, *include, omit\n      headers: {\n        "content-type": "application/json",\n        "csrf-token": token,\n      },\n      method: "POST",\n    }).catch(error => this.setState({ isError: true }))\n    if (data.ok) {\n      console.log(data.ok)\n      data.json().then(content => {\n        console.log(content)\n        this.props.changeAuth(content.authStatus)\n        this.props.setCategories(content.user.categories)\n        this.props.getEvents(content.user.events)\n        resetForm()\n      })\n    } else {\n      this.setState({\n        isError: true,\n      })\n    }\n  }\n

\n

Answer 1

如果前端域和服务器域不同，cookie 将不起作用。

您可以通过 Netlify 设置代理，/api/将前端域的某个路径（例如 ）的所有请求重定向到后端域。

要设置代理，您可以使用以下配置_redirects在发布目录（例如 ）中创建一个文件：public

/api/*  https://<server-url>:<server-port>/:splat 200

最后，将所有 HTTP 请求发送到该前端路径（例如https://<front-end-url>/api/users）而不是后端 URL，以确保 cookie 正常工作。

Answer 2

...当它在生产中时，cookie总是返回未定义...

一个可能的原因可能是您在生产中使用 HTTPS（应该是这种情况），并且浏览器会忽略 CSRF cookie，因为它未设置为安全 cookie。要解决此问题，请在生产中使用安全 cookie，在开发中使用非安全 cookie。

PS
为了使第一个 cookie 更安全，请替换此代码

app.use(csurf({ cookie: true }));

接着就，随即：

app.use(csurf({
  cookie: {
    httpOnly: true,
    secure: !devModeFlag
  }
}));

该httpOnly设置确保客户端上的 JS 无法触及此 cookie，这有利于额外的安全性。布尔devModeFlag变量应在开发中设置为 true，在生产中设置为 false。

要使第二个 cookie 安全，请替换此代码

res.cookie("XSRF-TOKEN", req.csrfToken());

接着就，随即：

res.cookie("XSRF-TOKEN", req.csrfToken(), { secure: !devModeFlag });