Nuxt 3中Fetch API遭CORS拦截问题排查求助

问题根源 #

这个错误完全源于服务器端。CORS是浏览器的同源安全策略，要求目标API服务器在响应中返回Access-Control-Allow-Origin等头信息，否则浏览器会拦截请求。Postman不受浏览器CORS策略限制，所以能正常请求；部署到域名后报错，也是因为服务器仍未配置正确的CORS响应头。

你的代码误区 #

你在前端请求头里添加Access-Control-Allow-Origin和Access-Control-Allow-Headers是错误的——这些是服务器需要返回的响应头，不是前端请求需要携带的字段，添加它们对解决CORS问题毫无作用，反而多余。

解决方案 #

方案1：配置服务器CORS（推荐，生产环境必用） #

让后端开发在API服务中添加以下响应头：

• Access-Control-Allow-Origin: 设置为你的前端域名（开发环境是http://127.0.0.1:3000，生产环境替换为实际域名），若允许所有域名访问可设为*（不推荐生产环境，存在安全风险）
• Access-Control-Allow-Headers: 包含前端请求中携带的所有自定义头，比如Authorization, Device, Content-Type
• 确保服务器能正确处理OPTIONS预检请求，返回200状态码及上述CORS头

方案2：Nuxt3代理（开发环境临时绕过） #

如果后端暂时无法修改配置，可通过Nuxt代理功能绕过浏览器CORS限制：

1. 安装代理模块：

npm install @nuxtjs/proxy

2. 在nuxt.config.ts中添加配置：

export default defineNuxtConfig({
  modules: ['@nuxtjs/proxy'],
  proxy: {
    '/api': {
      target: 'https://server_api_url:port',
      changeOrigin: true,
      pathRewrite: { '^/api': '' }
    }
  },
  runtimeConfig: {
    public: {
      apiBase: '/api' // 将原来的API地址替换为代理路径
    }
  }
})

3. 重启Nuxt服务后，前端请求会先转发到Nuxt服务器，再由Nuxt转发到目标API，从而避开浏览器的CORS检查

内容的提问来源于stack exchange，提问作者a programer