Next, Apollo, GraphQL CORS error with Sentry

SDKs
1

Hello all,

I’ve integrated Sentry in my NextJS with Strapi backend project. It uses Apollo and GraphQL.

I keep getting this error:
Access to fetch at 'http://localhost:1337/graphql' from origin '[http://localhost:3000](http://localhost:3000/)' has been blocked by CORS policy: Request header field sentry-trace is not allowed by Access-Control-Allow-Headers in preflight response.

So I removed integrations: [new Integrations.BrowserTracing()], from Sentry.init() and the error went away.

I’ve tried with fetchOptions: { mode: 'no-cors' } inside new ApolloClient() constructor but without any effect.
I also tried adding 'Access-Control-Allow-Origin': '*' to the headers inside createHttpLink() that ApolloLink later uses to create a link.

My question is, is there a way to keep browser tracing but resolve cors errors.

Code:

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

const httpLink = createHttpLink({
  uri: 'http://localhost:1337/graphql',
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
});

const link = ApolloLink.from([errorLink, httpLink]);

export const client = new ApolloClient({
  link,
  fetchOptions: {
    mode: 'no-cors'
  },
  cache: { ... }
});

  return (
      <AppContext.Provider
          value={{
            user: user,
            isAuthenticated: !!user,
            setUser: setUser,
          }}
      >
        <ApolloProvider client={client}>
          <Head>
            <link
               ...
            />
          </Head>
          <SearchProvider>
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </SearchProvider>
        </ApolloProvider>
      </AppContext.Provider>
      )

Thanks