如何解决Nuxt 3中调用第三方API时的CORS错误？

当你在纯客户端模式（ssr: false）下用useFetch直接请求第三方API时，浏览器会因为对方服务器未配置允许你的域名跨域而触发CORS Missing Allow Origin错误——这是浏览器的同源策略限制，Nuxt自身的CORS配置仅针对自身服务，无法解决第三方API的跨域问题。以下是两种可行的解决方式：

方案一：使用Nuxt代理转发请求（推荐） #

通过Nuxt代理模块将客户端请求转发到第三方API，利用服务器端请求不受浏览器CORS限制的特性绕过问题：

1. 安装代理模块

npm install @nuxtjs/proxy

2. 在nuxt.config.ts中配置代理规则

export default defineNuxtConfig({
  ssr: false,
  modules: ['@nuxtjs/proxy'],
  proxy: {
    '/api/proxy': {
      target: 'https://apitest.bankfeeds.com.au/v1',
      changeOrigin: true,
      pathRewrite: { '^/api/proxy': '' }
    }
  }
})

3. 修改useFetch请求路径为代理地址

const { data, error } = await useFetch('/api/proxy/customer/data', {
  method: 'POST',
  body: { /* 你的请求体数据 */ },
  headers: {
    // 按需添加第三方API要求的请求头（如授权信息）
    'Content-Type': 'application/json'
  }
})

方案二：自定义服务器中间件转发请求 #

如果需要在转发时添加自定义逻辑（如鉴权、日志），可以使用Nuxt服务器中间件：

1. 在项目根目录创建server/api/customer-data.post.ts文件

export default defineEventHandler(async (event) => {
  // 读取客户端传来的请求体
  const requestBody = await readBody(event)
  
  // 可在此添加自定义逻辑，比如校验请求、添加API密钥等
  const apiResponse = await $fetch('https://apitest.bankfeeds.com.au/v1/customer/data', {
    method: 'POST',
    body: requestBody,
    headers: {
      'Content-Type': 'application/json',
      // 若第三方API需要密钥，在此配置（不要在客户端暴露）
      // 'Authorization': 'Bearer YOUR_API_KEY'
    }
  })

  return apiResponse
})

2. 客户端调用该中间件接口

const { data, error } = await useFetch('/api/customer-data', {
  method: 'POST',
  body: { /* 你的请求体数据 */ }
})

注意事项 #

• 第三方API的敏感配置（如API密钥）必须放在服务器端，绝对不能在客户端代码中暴露，避免安全风险。
• 生产环境部署时，若使用Vercel、Netlify等平台，需根据平台文档调整代理或中间件的相关配置，确保转发逻辑正常运行。

内容的提问来源于stack exchange，提问作者Kishan Bhensadadiya