如何在React配合GraphQL及Apollo客户端场景下设置httpOnly cookie

报错根因 #

HttpOnly Cookie的设计规则就是禁止客户端JavaScript进行读写操作，你在React侧通过JS库尝试设置httpOnly属性为true的Cookie，本身就违反浏览器安全规范，和所使用的技术栈无关，不管用Axios还是Apollo都不可能通过前端JS实现该操作。

需要调整为服务端通过响应头设置Cookie、前端Apollo配置允许传递Cookie的逻辑，完全不需要前端手动处理Cookie写入。

1. GraphQL服务端改造 #

在你的verifyEmail查询对应的Resolver逻辑中，直接通过当前请求的响应对象设置Set-Cookie响应头，不需要将token返回在响应体中。

以下是Apollo Server搭配Express的示例代码：

const resolvers = {
  Query: {
    verifyEmail: async (parent, args, context) => {
      // 保留原有邮箱验证逻辑，生成token、过期时间、返回提示
      const { token, expiry, message } = await 你的邮箱验证逻辑();
      // 直接通过响应对象设置HttpOnly Cookie
      context.res.cookie('token', token, {
        expires: expiry,
        secure: process.env.SECURE_COOKIE === "true",
        httpOnly: true,
        path: "/",
        sameSite: "strict" // 补充配置增强安全性
      });
      // 响应体只需返回前端要展示的信息即可，不需要返回token
      return { message };
    }
  }
}

如果你使用其他GraphQL服务端实现，只要能拿到当前请求的响应实例，都可以通过对应方法设置Set-Cookie响应头。

如果是跨域部署的场景，服务端还需要额外配置CORS规则：

• 开启credentials: true
• 不能将origin设置为*，需要明确指定允许的前端域名

2. Apollo客户端配置 #

初始化Apollo Client时开启credentials配置，让客户端自动接收服务端返回的Cookie，且后续请求自动携带该Cookie：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';

const httpLink = createHttpLink({
  uri: "你的GraphQL接口地址",
  // 同域部署填"same-origin"，跨域部署填"include"
  credentials: "include"
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
});

3. 前端组件代码调整 #

删除原组件中手动设置Cookie的逻辑即可：

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) {
      return setText(data.verifyEmail.message);
    }
  }, [error, data])

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

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