Certain request headers removed when adding a custom request header

Help
,
1

I am trying to set a custom header without having the three headers needed to prevent CORS issues removed. Currently, if I set a custom header, ‘Sec-Fetch-Dest’, ‘Sec-Fetch-Mode’, and ‘Sec-Fetch-Site’ are no longer present. I also see a warning in the browser console that provisional headers are shown. Any suggestions on how to resolve this issue would be much appreciated!

Code:

import ReactDOM from 'react-dom/client'
import App from './App'
import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
  HttpLink,
  DocumentNode,
  from,
  ApolloLink,
} from '@apollo/client'
import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries'
import { sha256 } from 'crypto-hash'
import { print } from 'graphql/language/printer'

const peristedLink = createPersistedQueryLink({
  generateHash: async (schema: DocumentNode) => {
    return await sha256(print(schema))
  },
  useGETForHashedQueries: true,
})

const headersLink = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      'testing':'does this work?',
    }
  }));
  return  forward(operation)
})

const httpLink = new HttpLink({
  uri: process.env.REACT_APP_GRAPHQL_URL,
  // fetchOptions: {
  //   mode: 'cors' // adding this does not help when custom headers are set
  // }
})

const finalLink = from([headersLink, peristedLink, httpLink])

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: finalLink,
})

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
)

Request Headers with custom header added:

with custom header added
with custom header added1212×676 78.1 KB