Here is another of those CORS questions from a person who is not completely understanding the issue, because he works with frameworks only 😉

I’m using nuxt3 plus nuxt-graphql-client

My Apollo server runs on http://localhost:3001, Nuxt runs on http://localhost:3000

In the <script setup> section of a component, it is simple to async await a GraphQL call and use the result for rendering.
I believe this is a SSR type of call.

However, at runtime, when a user changes an input, I would like to refresh() the result set with the updated search text.

<script setup>
const searchQuery = ref('')
const { data, refresh } = await useAsyncGql('MyGqlQuery', { name: { contains: searchQuery.value })
const items = computed(() => data.value?.items || [])

// on keyboard input
const onKeyboardInput = async (newSearchQuery) => {
  searchQuery.value = newSearchQuery
  await refresh() // browser throws a CORS error  
}
</script>

In the onKeyboardInput() function the browser complains by throwing a CORS error. Probably already in preflight.

I have tried the useGqlHeaders({ 'Access-Control-Allow-Origin': 'http://localhost:3001' }) and useGqlCors({ mode: 'cors'}) functions (but maybe completely wrong).

Obviously, I am doing something stupid. But I’d really like to understand what settings are required, or how to get this to work. Any pointers to overcome my lack of understanding are highly appreciated.