部署在Firebase的Vue.js项目无法代理API至第三方Node.js后端

你猜的没错，devServer.proxy是vue-cli开发服务器提供的代理功能，仅在本地npm run serve时生效。生产环境构建后是静态资源，部署到Firebase Hosting后没有开发服务器来处理代理规则，所以请求无法转发。

针对Firebase部署的场景，有两种可行方案：

方案一：动态配置API基础地址（简单直接） #

通过环境变量区分开发/生产环境的API地址，避免硬编码：

1. 在项目根目录创建两个环境配置文件：
   • .env.development（开发环境）：

     VUE_APP_API_BASE_URL=/api
     VUE_APP_U_API_BASE_URL=/u/api
     

   • .env.production（生产环境）：

     VUE_APP_API_BASE_URL=http://113.XXX.XX.XXX:XXXX/api
     VUE_APP_U_API_BASE_URL=http://113.XXX.XX.XXX:XXXX/u/api
     

2. 在前端请求代码中，使用环境变量拼接请求路径：

   // 示例：发送API请求
   axios.get(`${process.env.VUE_APP_API_BASE_URL}/users`)
   

3. 重新执行npm run build后部署到Firebase即可。

方案二：利用Firebase Hosting重写规则（推荐，隐藏后端地址+解决跨域） #

通过Firebase的服务器端重写，将前端的/api、/u/api请求转发到后端，同时避免浏览器跨域问题：

1. 在项目根目录创建firebase.json（如果已存在则修改）：

   {
     "hosting": {
       "public": "dist", // 对应vue-cli build后的输出目录
       "ignore": [
         "firebase.json",
         "**/.*",
         "**/node_modules/**"
       ],
       "rewrites": [
         {
           "source": "/api/**",
           "destination": "http://113.XXX.XX.XXX:XXXX/api/**"
         },
         {
           "source": "/u/api/**",
           "destination": "http://113.XXX.XX.XXX:XXXX/u/api/**"
         },
         // 确保单页应用路由正常
         {
           "source": "**",
           "destination": "/index.html"
         }
       ]
     }
   }
   

2. 调整vue.config.js的publicPath（因为Firebase Hosting默认从根目录提供静态资源）：

   module.exports = {
     publicPath: '/', // 替换原来的'/dist'
     devServer: {
       // 保留原有的开发环境代理配置
       proxy: {
         '^/api/':{
           target: 'http://XXX.XXX.XX.XXX:XXX/',
           secure: false,
           changeOrigin: true
         },
         '^/u/api/':{
           target: 'http://XXX.XXX.XX.XXX:XXX/',
           secure: false,
           changeOrigin: true
         }
       }
     }
   }
   

3. 执行npm run build构建项目，然后用Firebase CLI部署：

   firebase deploy --only hosting
   

• 如果后端服务器没有配置CORS，方案二的Firebase重写是更优选择，因为服务器端转发不会触发浏览器的跨域限制。
• 确保Firebase CLI已正确登录并关联你的项目。

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