Adding multiple headers to graphql client (apollo-boost)

Question

  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 });
    }

});

The problem here is when i just add Authorization header it makes the POST call and shows the expected error.

But when i add x-abc-id header which is also expected by backend it only makes OPTIONS call (no post call)

P.S. On postman adding both headers works completely fine.

score 0 · Answer 1 · answered Mar 19 '20 at 08:08

Found what the issue was, thought to share if it help.

Postman does not perform OPTIONS call before sending request to backend.

In OPTIONS call, represents what client call contains: [authorization, content-type, x-abc-id]

BUT what does server expects:

Just authorization, content-type So it's a calls headers mismatch (nothing related to Apollo).

x-abc-id header explicitly has to be allowed in CORS configuration on backend.

Thanks to Pooria Atarzadeh

Adding multiple headers to graphql client (apollo-boost)

1 Answers1