Nuxt SSR配置axios代理解决CORS仍遇504报错问题[已解决]

问题复现特征 #

• Nuxt项目调用后端接口初始报CORS跨域错误
• 前端请求写法符合官方示例：

await this.$axios.post("/api/contact", {
  replyTo: this.form.email,
  name: this.form.name,
  firstName: this.form.firstName,
  phone: this.form.phone,
  company: "",
  message: this.form.message,
}).then(() => {
  this.isSend = true;
}).catch((e) => {
  console.log(e);
  this.isError = true;
});

• 按照公开教程配置@nuxtjs/axios+@nuxtjs/proxy代理后跨域报错消失，接口请求返回504网关超时，初始代理配置如下：

modules: ["@nuxtjs/axios", "@nuxtjs/proxy"],
axios: {
    proxy: true,
    debug: true,
},
proxy: {
    "/api/": {
        target: "http://myserver.eu-west-3.elasticbeanstalk.com/",
        pathRewrite: { "^/api/": "" },
        changeOrigin: true,
    },
},

• 目标接口为部署在AWS Elastic Beanstalk上的/contact路径，同接口Postman调用100%成功，更换两套后端实现（API Gateway+Lambda+SES、Node Express+SES）问题复现，排除后端服务可用性问题
• 公开渠道可查的代理配置方案全部试过后仍无法解决，将业务代码迁移至旧的正常运行Nuxt项目框架后问题消失，疑似版本兼容导致

根因说明 #

这类配置写法看起来完全正确但代理转发504的问题，基本来自三个容易忽略的点：

1. 依赖版本适配错误
   @nuxtjs/axios、@nuxtjs/proxy和Nuxt主版本强绑定：Nuxt2项目必须使用v5.x版本的@nuxtjs/axios，误装适配Nuxt3的v6+版本时，代理规则不会真正生效，请求不会被转发到配置的target地址，直接返回504。这也是为什么配置写法和正常项目完全一致但功能异常的最常见原因。
2. 代理配置缺省参数不兼容目标服务
   部署在AWS Elastic Beanstalk上的服务对代理转发的请求有默认校验，缺省配置下的websocket转发、https校验逻辑会导致连接被拦截。
3. 本地网络拦截
   本地开启系统代理、VPN工具时，Nuxt开发服务的出站请求不会自动走系统代理规则，会出现连不通目标服务的情况，而Postman默认继承系统代理配置，因此可以正常调用。

修复步骤 #

1. 锁死适配Nuxt2的依赖版本：

npm install @nuxtjs/axios@5.13.6 @nuxtjs/proxy@2.1.0 -D

删除node_modules、对应包管理工具的lock文件后重新执行依赖安装，重启dev服务测试。
2. 补全代理配置参数，适配EB服务：

// nuxt.config.js
modules: ["@nuxtjs/axios", "@nuxtjs/proxy"],
axios: {
    proxy: true,
    debug: false,
},
proxy: {
    "/api/": {
        target: "http://myserver.eu-west-3.elasticbeanstalk.com/",
        pathRewrite: { "^/api/": "" },
        changeOrigin: true,
        secure: false,
        ws: false
    },
},

3. 临时关闭本地系统代理、VPN类网络工具，排除本地网络拦截影响。
4. 以上步骤全部无效时，直接复用已知正常的同版本Nuxt项目骨架迁移业务代码即可，这类隐式版本兼容问题排查成本远高于框架迁移成本。

注意：前端配置代理和后端配置CORS放行二选一即可，两层规则同时存在会触发校验冲突，反而导致请求异常。

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