@apollo/client 如何为每个请求配置认证头及携带凭证适配Passport鉴权

• 旧版apollo-boost是封装了全链路配置的开箱即用包，其暴露的request配置本质是内置的请求拦截器，用于在请求发出前统一处理凭证、请求头；独立安装的@apollo/client作为核心SDK，移除了这类开箱即用的封装逻辑，因此构造参数中不再存在request配置项
• 之前自定义HttpLink配置credentials未生效，通常是两类常见原因：一是没有将自定义link实例正确传入ApolloClient构造参数，被SDK自动生成的默认HttpLink覆盖；二是跨域场景下配置不符合浏览器Cookie携带规则，导致凭证传递被浏览器拦截
• 后端基于Passport+express-session的Cookie鉴权场景，不需要手动拼接鉴权头，核心要求是保证每个GraphQL请求都能自动携带当前会话的Cookie

首先确认依赖安装完整：除了核心包@apollo/client，需要单独安装独立的HTTP链路包@apollo/link-http（旧版apollo-boost已内置该依赖，独立安装核心包时需要手动补充）。

完整初始化代码如下：

import { ApolloClient, InMemoryCache, HttpLink, from } from '@apollo/client';
import { onError } from '@apollo/client/link/error';

// 配置携带会话凭证的HTTP链路
const httpLink = new HttpLink({
  uri: '/api/graphql', // 替换为你的GraphQL接口地址
  // 核心配置：强制随请求携带Cookie，匹配express-session鉴权逻辑
  credentials: 'include'
});

// 可选：统一错误处理链路
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach((err) => {
      console.error(`GraphQL接口错误：${err.message}`, err);
    });
  }
  if (networkError) {
    console.error(`网络请求异常：${networkError.message}`);
  }
});

// 组装链路顺序：错误处理优先，再走到实际请求链路
const clientLink = from([errorLink, httpLink]);

// 初始化ApolloClient实例
export const apolloClient = new ApolloClient({
  link: clientLink,
  cache: new InMemoryCache()
});

• 校验后端跨域配置：Express侧的CORS中间件需要明确开启credentials: true，且origin配置不能使用通配符*，需指定前端实际访问域名，否则浏览器会阻止跨域请求携带Cookie
• 校验Cookie属性配置：express-session生成的会话Cookie，根据部署场景需要调整sameSite属性：前后端同域时可使用默认值，跨子域部署时需设为lax，跨主域部署时需设为none并搭配secure: true，否则请求不会携带对应Cookie
• 适配Next.js服务端渲染场景：如果在页面服务端渲染阶段发起GraphQL请求，由于服务端环境不存在浏览器Cookie存储，需要从入站请求中提取Cookie头，手动注入到HttpLink的请求头中，而非依赖HttpLink的自动凭证携带能力
• 检查ApolloClient初始化逻辑：如果构造ApolloClient时未显式传入自定义link参数，SDK会自动生成默认的无凭证HttpLink，所有自定义配置都会失效

内容的提问来源于stack exchange，提问作者Abhilash D K