How to fix Sentry Angular App Receiving CORS error

I'm running an angular app with versions

Angular CLI: 13.3.11
Node: 18.16.0 (Unsupported)
Package Manager: npm 9.5.1
OS: darwin arm64

Angular: 13.4.0


I'm receiving this response from Sentry {"detail":"event submission rejected with_reason: Cors"} when POSTing https://xxxxx.ingest.sentry.io/api/xxxxxxx/envelope/?sentry_key=xxxxxxxx&sentry_version=7&sentry_client=sentry.javascript.angular-ivy%2F7.66.0

I'm developing locally on localhost:4200

I've set the allowed domains in sentry project settings to allow my localhost access via:

localhost:4200


What am I doing wrong? I'd appreciate any guidance.

EDIT to show initializing in main.ts:

import { environment } from './environments/environment';
import {AppModule} from "./app/app.module";
import * as Sentry from "@sentry/angular-ivy";

Sentry.init({
dsn: "https://xxxxx@xxxxx.ingest.sentry.io/xxxxx",
tracePropagationTargets: ["localhost", /^https:\/\/xxxxxxxx.ngrok-free.app/],
integrations: [
new Sentry.BrowserTracing(),
new Sentry.Replay({
maskAllText: false,
blockAllMedia: false,
}),
],
// Performance Monitoring
tracesSampleRate: environment.production ? 0.2 : environment.staging ? 0.5 : 1.0, // Capture 100% of the transactions, reduce in production!
// Session Replay
replaysSessionSampleRate: environment.production ? 0.1 : environment.staging ? 0.5 : 1.0, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});

Continue reading...