Dealing with CORS Issues

If your frontend and backend are hosted on different domains (for example, your frontend is on https://example.com and your backend is on https://api.example.com), you need to configure your backend CORS headers to prevent requests from being blocked by the browser.

Sentry doesn't attach the sentry-trace and baggage headers to every outgoing request. Instead, it only attaches these headers to requests whose URLs match the patterns specified in the tracePropagationTargets configuration option.

By default, tracePropagationTargets is set to ['localhost', /^\//], which means trace headers are only attached to:

  • Requests containing localhost in their URL (e.g., http://localhost:3000/api)
  • Requests whose URL starts with / (e.g., /api/users, /graphql)

This default behavior helps prevent sending trace data to third-party services and avoids potential CORS issues.

To enable distributed tracing across different domains, you need to configure tracePropagationTargets to include the URLs of your backend services:

Copied
Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [Sentry.browserTracingIntegration()],
  tracePropagationTargets: [
    "localhost", // For local development
    /^\/api\//, // For same-origin API calls
    "https://api.example.com", // For your backend domain
    "https://auth.example.com", // For additional services
  ],
});

Once you've configured tracePropagationTargets to include your backend domains, you need to configure your backend to allow the trace headers:

Copied
Access-Control-Allow-Headers: sentry-trace, baggage

Your server's exact configuration will depend on your setup, but the important part is allowing both the sentry-trace and baggage headers.

If you want to disable distributed tracing entirely and ensure no trace headers are sent:

Copied
Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  // Empty array prevents all trace header propagation
  tracePropagationTargets: [],
});
Was this helpful?
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").