User Feedback submission CORS error: Request header field baggage is not allowed by Access-Control-Allow-Headers in preflight response

[timkelty]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/vue

SDK Version

7.64.0

Framework Version

7.64.0

Link to Sentry event

https://sentry.io/api/embed/error-page/?dsn=https://1d71f704d08d4bad95a66d041a087279@o4505162248945664.ingest.sentry.io/4505517755138048&eventId=483fc1b01e0545c087b10949a364a861

SDK Setup

  import {createApp} from 'vue';
  import * as Sentry from "@sentry/vue";  
  const app = createApp(Root);
  const isProduction = CRAFT_ENVIRONMENT === 'production';

  Sentry.init({
    app,
    dsn: SENTRY_DSN,
    environment: CRAFT_ENVIRONMENT,
    release: GIT_SHA,
    integrations: [
      new Sentry.BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      }),
      new Sentry.Replay(),
    ],
    tracesSampleRate: isProduction ? 0.2 : 1.0,
    tracePropagationTargets: [
      'localhost',
    ],
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    beforeSend(event, hint) {
      if (event.exception) {
        Sentry.showReportDialog({ eventId: event.event_id });
      }
      return event;
    },

  })

Steps to Reproduce

• Call Sentry.showReportDialog
• Fill out form
• Click submit

Expected Result

Successful submission

Actual Result

Access to XMLHttpRequest at 'https://sentry.io/api/embed/error-page/?dsn=https://1d71f704d08d4bad95a66d041a087279@o4505162248945664.ingest.sentry.io/4505517755138048&eventId=483fc1b01e0545c087b10949a364a861' from origin 'https://console.craftcms.com' has been blocked by CORS policy: Request header field baggage is not allowed by Access-Control-Allow-Headers in preflight response.

Baggage and Sentry-Trace are indeed in the outgoing request (as I believe they should be).

But the response for the OPTIONS request doesn't include them in Access-Control-Allow-Headers:

[timkelty]

This looks like a similar issue to #6077

Upon further investigation, I was setting tracePropagationTargets via some env vars that weren't present in my build process, so it resulting in a Regex that matched everything.

[pelagaggi]

Hi there.

Nothing prevents sentry from adding the baggage on my case, I've tried adding:

tracePropagationTargets: [],
tracesSampleRate: 0,
tracesSampler: () => 0,

I'm using sentry

{
"@sentry/browser": "7.9.0",
  "@sentry/integrations": "7.9.0",
  "@sentry/nextjs": "7.9.0",
  "@sentry/react": "7.9.0",
  }

My client side config is

init({
   // my dsn as string
    dsn: SENTRY_DSN || '***',
    // Adjust this value in production, or use tracesSampler for greater control
    environment: SENTRY_ENVIRONMENT,
    normalizeDepth: 11,
    integrations: [new ExtraErrorData({ depth: 10 })],
    tracePropagationTargets: [],
    tracesSampleRate: 0,
    tracesSampler: () => 0,
    // ...
    ignoreErrors: [/^Product not found for sku: ([\w]*)$/],
  })

It seems like it doesn't add the sentry-trace but still breaks THIRD_PARTY CORS>
There is no way for me to control my third party Access-Control-Allow-Headers.
If this can't be solved basically I have t chose between Sentry and my third party.

Any help would be much appreciated.
@getsentry-bot

[jasonmit]

@pelagaggi I have the same exact issue and also on @sentry/nextjs. tracesSampleRate set to 0 and it's still adding the Bagger headers to the requests. I also tried to fine tune tracePropagationTargets without success.

[metafounder]

same issue here