向 graphql 客户端添加多个标头（apollo-boost）答案

【问题标题】：Adding multiple headers to graphql client (apollo-boost)向 graphql 客户端添加多个标头（apollo-boost）
【发布时间】：2020-06-29 13:13:03
【问题描述】：

  const client = new ApolloClient({
    uri,
    onError: (e: any) => {
      console.log('error: ', e); // Failed to fetch
      console.log(e.operation.getContext()); // it does show it has x-abc-id
    },

    request: operation => {
      const headers: { [x: string]: string } = {};
      const accessToken = AuthService.getUser()?.accessToken;
      const activeClientId = UserService.getActiveClientId();
      headers['x-abc-id'] = activeClientId;
      if (accessToken) headers['Authorization'] = `Bearer ${accessToken}`;
      operation.setContext({ headers });
    }

});

这里的问题是，当我只添加 Authorization 标头时，它会进行 POST 调用并显示预期的错误。

但是当我添加后端也期望的 x-abc-id 标头时，它只会进行 OPTIONS 调用（无后调用）

附：在邮递员上添加两个标题完全正常。

【问题讨论】：

标签： graphql apollo apollo-client apollo-boost

【解决方案1】：

找到问题所在，如果有帮助，请分享。

邮递员在向后端发送请求之前不会执行OPTIONS call。

在 OPTIONS 调用中，?代表客户端调用包含的内容：[authorization, content-type, x-abc-id]

但是服务器期望什么：?

只是授权，内容类型 所以这是呼叫标头不匹配（与 Apollo 无关）。

x-abc-id 标头必须在后端的 CORS 配置中明确允许。

感谢Pooria Atarzadeh

【讨论】：