Sentry 通过 VueJS3 在 localhost 中获取 CORS 错误

Question

我使用 http://localhost:3000 来开发我的网站，但我总是从 Sentry 收到 CROS 错误，我错过了什么？

在哨兵设置中： 我已将项目的允许域设置为 *，但它看起来不起作用......

从源“http://localhost:3000”获取“my-sentry-dsn”的访问已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

Vue3+Vite

yarn add @sentry/tracing @sentry/vue

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

Answer 1

我通过在

*

参数中使用

tracingOrigins

解决了这个问题。

像这样：

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

另一个问题，可能是广告拦截扩展，如 adblock、ublock。

Answer 2

对于登陆这里的人，我通过禁用 uBlock origin 来修复它......