Cannot get server response headers in browser

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<AnyRouter> =>
  () =>
  ({ 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;
    });
  };