Nuxt.js部署至服务器后Proxy API调用失败问题求助

问题根源 #

@nuxtjs/proxy本质是Nuxt开发服务器的中间件，仅在本地开发时（nuxt dev）由Nuxt自带的服务器处理代理转发。当你打包生成dist文件夹部署时：

• 如果是静态部署（target: 'static'）：打包后没有Nuxt服务器，所有请求直接走部署的静态服务器，代理配置完全失效
• 如果是服务端渲染部署但直接用静态文件启动：同样没有Nuxt服务器来处理代理逻辑

解决方案 #

情况1：静态部署（dist文件夹上传到Nginx/Apache等静态服务器） #

直接在部署服务器上配置反向代理，以Nginx为例：

1. 找到Nginx的站点配置文件（通常在/etc/nginx/conf.d/或/etc/nginx/sites-available/）
2. 添加如下配置：

server {
  # 其他配置（监听端口、根目录等）
  location /api/ {
    proxy_pass http://your-external-api-url/; # 替换成实际的外部API地址，注意末尾的/
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    # 路径重写，对应Nuxt配置里的pathRewrite
    rewrite ^/api/(.*)$ /$1 break;
  }
}

3. 重启Nginx生效：sudo nginx -s reload

情况2：服务端渲染部署（用nuxt start启动） #

1. 确认nuxt.config.js里的target字段为'server'（默认值，无需额外配置）
2. 部署时不要直接上传dist文件夹后用静态服务器打开，而是：
   • 上传项目核心文件（.nuxt、nuxt.config.js、package.json等）
   • 在服务器上安装依赖：npm install
   • 用npm run start启动Nuxt服务，此时代理配置会由Nuxt的生产服务器处理
3. 检查是否有条件加载代理模块的代码（比如只在dev环境加载），如果有，移除条件：

// 错误写法（仅dev加载）
modules: process.env.NODE_ENV === 'development' ? ['@nuxtjs/proxy'] : []

// 正确写法（生产环境也加载）
modules: ['@nuxtjs/proxy']

额外注意事项 #

• 外部API需要允许部署服务器的IP访问，避免跨域或权限问题
• 测试部署后的代理时，直接访问服务器域名的/api路径，观察请求是否转发到目标API

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