Cannot get server response headers in browser

Question

Hi,
I am working on retrieving a specific server-sent header using a custom link with tRPC. This methodology works flawlessly during testing, but issues arise when I implement it in the client browser (the latest Chrome).

In the browser, the list of headers only contains Content-Type and Content-Length. However, I can confirm that the header I am seeking is present as it's visible within Chrome's developer tools.

Could you help me understand why the header is not appearing as expected when using the custom link in the client browser, even though it's clearly present and visible in the developer tools?

Here is my implementation of the custom link builder:

import { AnyRouter } from '@trpc/server';
import { observable } from '@trpc/server/observable';
import { TRPCLink } from '@trpc/client';

export const accessTokenLink =
  (
    tokenName: string,
    onAccessToken: (token: string) = void,
  ): TRPCLink =
  () =
  ({ op, next }) = {
    return observable((observer) = {
      const unsubscribe = next(op).subscribe({
        next(value) {
          // Extract access token from the response
          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
          const token = (value?.context?.response as any)?.headers?.get(
            tokenName,
          ) as string;

if (token) {
            onAccessToken(token);
          }

observer.next(value);
        },
        error(err) {
          observer.error(err);
        },
        complete() {
          observer.complete();
        },
      });

return unsubscribe;
    });
  };
`

Cannot get server response headers in browser

Looking for more? Join the community!