'Sentry get CORS error in localhost by VueJS3

I'm using http://localhost:3000 to development my website, but I always get CROS error from Sentry, what am I missing?

in Sentry's Setting: I've set the project's Allowed Domains to *, but it's looks like not work....

Access to fetch at 'my-sentry-dsn' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Vue3 + Vite

yarn add @sentry/tracing @sentry/vue

in main.ts

import * as Sentry from "@sentry/vue"
import { Integrations } from "@sentry/tracing"
const app = createApp(App)
// Initialize Sentry
const dsnSentry = import.meta.env.VITE_SENTRY_DSN as string
if (!!dsnSentry) {
  const env = import.meta.env.VITE_ENV
  const isDebug = env !== "production"
  Sentry.init({
    app,
    dsn: dsnSentry,
    // integrations: [new Integrations.BrowserTracing()],
    integrations: [
      new Integrations.BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(router),
        tracingOrigins: ["localhost:3000", /^\//],
      }),
    ],
    tracesSampleRate: 1.0,
    debug: isDebug,
  })
}

app.mount("#app")


Solution 1:[1]

I solved this problem by using * in the tracingOrigins param.

Like this:

Sentry.init({
  dsn: "__DNS__",
  integrations: [new BrowserTracing({ tracingOrigins: ["*"] })],
  tracesSampleRate: 1.0,
});

Another problem, can be ads block extension like adblock, ublock.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jeremy Caney