时间戳

首页 > 解决方案 > 如何在 React 中设置 httpOnly cookie？

javascript - 如何在 React 中设置 httpOnly cookie？

问题描述

我正在尝试在使用 GraphQL 和 Apollo 时在 React 中设置一个 httpOnly cookie。这或多或少是我的 React 组件的样子：

const verifyEmail = () => {
  const [showMessage, setShowMessage] = useState(true);
  const [text, setText] = useState("Loading... Do not close.");
  const { data, error } = useQuery(VERIFY_EMAIL);
  
  useEffect(() => {
    if (error) {return setText(genericErrorMessage)}
    if (data) {
      const cookies = new Cookies();
      cookies.set("token", data.verifyEmail.token, {
        expires: data.verifyEmail.expiry,
        secure: (process.env.SECURE_COOKIE === "true"),
        httpOnly: true,
        path: "/"
      })
      return setText(data.verifyEmail.message);
    }
  }, [error, data])

  return (
    <div>
      {showMessage && (<ShowMessage setShowMessage={setShowMessage} text={text] />)}
    </div>
  )
}

这里的想法是使用来自 GraphQL api 的响应数据来设置 cookie。但是，每当我尝试这样做时，都会收到以下错误：“Cookie 'token' 已被拒绝，因为已经有一个 HTTP-Only cookie 但脚本试图存储一个新的”。也许我收到此错误是因为无法通过 JavaScript 访问 httpOnly cookie，而 React 是在用户浏览器中运行的 JavaScript 框架。无论如何，我想知道是否有办法实现这一点。我见过网上有人使用 express 和 axios 来做这件事，但没有使用 GraphQL 查询和 Apollo 客户端。我目前的解决方案是将 httpOnly 选项设置为 false。

标签： javascriptreactjscookiesapollo-client

解决方案

不，而是 httpOnly 存在以防止在客户端上操纵 cookie。httpOnly Cookie 必须在服务器上处理，而不是客户端。

推荐阅读