Angular中Apollo GraphQL请求Header未传递问题排查

1. 核心问题：模块导入错误导致createApollo未执行 #

你的ApolloModule、HttpLinkModule、HttpClientModule仅放在exports数组中，未添加到imports数组。Angular模块必须先导入依赖模块，才能使用其提供的服务（如HttpLink、Apollo相关服务），这直接导致APOLLO_OPTIONS的工厂函数createApollo无法触发执行。

2. 修复步骤 #

步骤1：修正模块导入配置 #

将HttpClientModule、ApolloModule、HttpLinkModule移到@NgModule的imports数组中：

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    // 新增依赖模块导入
    HttpClientModule,
    ApolloModule,
    HttpLinkModule,
    // 原有导入项
    MatSidenavModule,
    NgxSkeletonLoaderModule,
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
    })
  ],
  exports: [
    TranslateModule
    // 移除exports中的Apollo相关模块，除非其他模块需导出使用
  ],
  // 其他配置保持不变
})
export class AppModule { }

步骤2：排查AppsyncService的冲突 #

你引入了AppsyncService，如果该服务内部自行初始化了Apollo客户端（比如通过Apollo.create()方法），会覆盖你通过APOLLO_OPTIONS配置的客户端，导致createApollo不执行。

• 打开appsync.service.ts，若存在类似以下代码，需移除或修改：

  constructor(private apollo: Apollo, private httpLink: HttpLink) {
    this.apollo.create({
      link: this.httpLink.create({ uri: '...' }),
      cache: new InMemoryCache()
    });
  }
  

• 改为依赖APOLLO_OPTIONS提供的默认客户端，直接注入Apollo即可使用。

步骤3：优化Header配置（可选） #

要确保所有请求（Query/Mutation）都携带Header，推荐使用apollo-link-context动态设置Header（静态Header也适用，更符合Apollo最佳实践）：

1. 安装依赖：

npm install apollo-link-context

2. 修改createApollo函数：

import { setContext } from 'apollo-link-context';
// 其他导入保持不变

export function createApollo(httpLink: HttpLink): any {
  const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        'Host': 'abc.com'
      }
    };
  });

  const link = authLink.concat(httpLink.create({ uri }));

  return {
    link,
    cache: new InMemoryCache(),
  };
}

3. 验证修复 #

• 启动项目，查看控制台是否打印createApollo中的console.log内容，确认函数已执行。
• 检查Mutation请求的Header，确认Host头已携带。
• 若Mutation仍异常，打开浏览器开发者工具，对比Query和Mutation请求的Payload、Header差异，排查是否有其他拦截器或服务修改了请求。

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