CODEWITHSUNDEEP
vuejs3sentryvite
Denise Die
Denise Die

Reputation: 101

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")

Upvotes: 10

Views: 8732

Answers (2)

Naffah Abdulla Rasheed
Naffah Abdulla Rasheed

Reputation: 51

For whoever lands here, I fixed it by disabling uBlock origin...

Upvotes: 0

Junior Marques
Junior Marques

Reputation: 402

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.

Upvotes: 14

Related Questions