AngularFire / Firebase Debug Token Issues

In my app.module.ts:

import <various imports>...

declare global {
  // eslint-disable-next-line no-var
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean | string | undefined;
}

self.FIREBASE_APPCHECK_DEBUG_TOKEN = environment.appCheckDebug; // set to <debugToken> that registered with App-Check in Firebase Console

@NgModule({
  declarations: [<component decs>...],
  imports: [
    <ng material module imports>..., 
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideAppCheck(() =>
      initializeAppCheck(getApp(), {
        provider: new ReCaptchaV3Provider(environment.recaptchaSiteKey),
        isTokenAutoRefreshEnabled: true,
      })
    ),
    provideFirestore(() => getFirestore()),
    provideStorage(() => getStorage()),
    provideAnalytics(() => initializeAnalytics(getApp())),
    <serviceworker module>],
  providers:[],
  bootstrap:[AppComponent] 
})
export class AppModule{}

The issue seems to be a POST request to https://content-firebaseappcheck.googleapis.com/v1/projects/<projectId>/apps/<appId>:exchangeDebugToken?key=<firebaseAPIKey>

Request body:

{"debug_token":"<debugToken>"}

Response:

{
  "error": {
    "code": 403,
    "message": "Requests from referer http://localhost:8080/ are blocked.",
    "status": "PERMISSION_DENIED",
    "details": [
      {
        "@type": "type.googleapis.com/google.rpc.ErrorInfo",
        "reason": "API_KEY_HTTP_REFERRER_BLOCKED",
        "domain": "googleapis.com",
        "metadata": {
          "service": "firebaseappcheck.googleapis.com",
          "consumer": "projects/<redact>"
        }
      }
    ]
  }
}

When I tried to add a Referer header using the Firebase hosting url through a postman POST request it was successful. I thought the debug token was supposed to get around needing the request to be from the project url on localhost, so I’m very confused.