如何在Apollo Client中仅当HttpOnly Cookie存在时添加自定义请求头？

核心思路 #

由于HttpOnly Cookie无法通过前端JS直接读取值，我们只能通过document.cookie检查目标Cookie是否存在，再利用Apollo Client的请求拦截器动态添加请求头。

具体步骤 #

1. 编写Cookie检测函数
   实现一个函数，检查当前页面的Cookie字符串中是否包含目标Cookie的名称：

   function hasTargetCookie() {
     return document.cookie.includes('MYNAMEffb4afd023baac83115bf7882');
   }
   

2. 配置Apollo Client的请求拦截器
   使用setContext创建请求上下文拦截器，在每次请求发起前判断是否需要添加自定义请求头：

   import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
   import { setContext } from '@apollo/client/link/context';
   
   // 基础Http链接配置
   const httpLink = createHttpLink({
     uri: '你的GraphQL接口地址', // 替换为实际接口地址
   });
   
   // 请求头拦截逻辑
   const authLink = setContext((_, { headers }) => {
     const shouldAddHeader = hasTargetCookie();
     // 仅当Cookie存在时添加X-My-Name头
     const updatedHeaders = {
       ...headers,
       ...(shouldAddHeader && { 'X-My-Name': 'Name' }),
     };
     return { headers: updatedHeaders };
   });
   
   // 创建Apollo Client实例
   const client = new ApolloClient({
     link: authLink.concat(httpLink),
     cache: new InMemoryCache(),
   });
   
   export default client;
   

3. 在React应用中使用该Client
   将配置好的Apollo Client通过ApolloProvider包裹应用根组件，确保所有GraphQL请求都走上述拦截逻辑：

   import { ApolloProvider } from '@apollo/client';
   import client from './apollo-client';
   import App from './App';
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <ApolloProvider client={client}>
       <App />
     </ApolloProvider>
   );
   

注意事项 #

• 确保目标Cookie的SameSite和Domain设置允许当前页面访问，否则document.cookie会无法检测到它。
• setContext会在每次请求前执行，保证请求头的动态性。

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