客户端刷新（）在 Chrome 中给出 CORS 错误

Question

这是另一个不完全理解该问题的人提出的 CORS 问题，因为他只使用框架;)

我正在使用 nuxt3 plus

nuxt-graphql-client

我的 Apollo 服务器运行在

http://localhost:3001

，Nuxt 运行在

http://localhost:3000

在组件的

<script setup>

部分，可以简单地进行

async await

GraphQL 调用并使用结果进行渲染。 我相信这是 SSR 类型的调用。

但是，在运行时，当用户更改输入时，我想

refresh()

使用更新的搜索文本来显示结果集。

<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>

在

onKeyboardInput()

函数中，浏览器会抛出 CORS 错误。可能已经在预检中了。

我尝试过

useGqlHeaders({ 'Access-Control-Allow-Origin': 'http://localhost:3001' })

和

useGqlCors({ mode: 'cors'})

功能（但可能完全错误）。

显然，我正在做一些愚蠢的事情。但我真的很想了解需要哪些设置，或者如何让它发挥作用。非常感谢任何能够克服我缺乏理解的指示。

Answer 1

好吧，虽然是个白痴，但希望能帮助别人；将 CORS 添加到 Apollo server 实例！这不是客户问题...