Nuxt3中useFetch遇CORS错误，如何确保请求走Nuxt服务器？

API 探路者

2026-7-27

解决方案

方法一：强制useFetch在服务器端发起

useFetch提供了server配置项，设置为true后，无论SSR渲染还是客户端路由跳转（nuxt-link），请求都会通过Nuxt服务器发起，避免客户端直接请求外部接口导致的CORS错误。

修改你的app.vue代码：

<script setup>
const route = useRoute();
const { data, refresh } = await useFetch(`https://thesite.net/${route.path}`, {
  // 强制请求在Nuxt服务器端执行
  server: true
});

watch(() => route.path, async () => {
  await refresh();
});
</script>

当客户端通过nuxt-link跳转时，Nuxt会在服务器端重新执行useFetch请求，再将数据返回给客户端，不会触发浏览器的CORS校验。

方法二：配置Nuxt代理（更推荐）

通过配置反向代理，将前端请求转发到Nuxt服务器，再由服务器代理请求目标接口，彻底解决跨域问题，同时还能隐藏目标接口地址，提升安全性。

安装代理模块：

npm install @nuxtjs/proxy

在nuxt.config.ts中配置代理：

export default defineNuxtConfig({
  modules: ['@nuxtjs/proxy'],
  proxy: {
    '/api': {
      target: 'https://thesite.net',
      changeOrigin: true,
      pathRewrite: { '^/api': '' }
    }
  }
});

修改app.vue中的请求路径为相对路径：

<script setup>
const route = useRoute();
const { data, refresh } = await useFetch(`/api/${route.path}`);

watch(() => route.path, async () => {
  await refresh();
});
</script>

此时所有请求都会先发送到Nuxt服务器的/api路径，再由代理转发到目标接口https://thesite.net，完全规避CORS问题。