Nrwl Nx Angular构建后API端点URL错误 配置问题咨询

问题根本原因 #

Angular 提供的代理配置（proxy.conf.json）仅对本地开发服务（ng serve）生效，生产构建打包后的静态资源不会加载代理规则，你配置的代理文件替换逻辑对生产环境完全无效，这是构建后API地址错误的核心原因。

推荐解决方案（二选一即可） #

方案1：通过Angular环境变量配置不同环境的API端点 #

这是最常用的多环境地址管理方案，操作步骤如下：

1. 找到项目的环境变量配置文件，默认路径为src/environments/，如果是NX monorepo项目对应路径为apps/front/src/environments/，分别修改两个环境文件：
   • 本地开发环境environment.ts（对应本地运行场景）：

     export const environment = {
       production: false,
       apiBaseUrl: 'http://localhost:3333'
       // 如果本地习惯配合代理使用，也可填'/api'，和你之前的本地配置保持一致即可
     };
     

   • 生产环境environment.prod.ts（对应构建后部署场景）：

     export const environment = {
       production: true,
       apiBaseUrl: 'http://myServer/API'
     };
     

2. 调整所有接口请求的写法，基础路径统一引用环境变量：

   // 先引入环境变量
   import { environment } from 'src/environments/environment';
   
   // 示例请求，原写法'/api/todos'替换为如下写法
   this.http.get(`${environment.apiBaseUrl}/todos`)
   

3. 确认angular.json中生产构建配置已开启环境文件替换，找到生产配置段的fileReplacements规则，确保存在如下配置，你之前添加的代理文件替换规则可以直接删除：

   "fileReplacements": [
     {
       "replace": "apps/front/src/environments/environment.ts",
       "with": "apps/front/src/environments/environment.prod.ts"
     }
   ]
   

方案2：生产服务器配置反向代理 #

如果你不想把API地址硬编码到打包产物中，可以在部署前端静态资源的Web服务器（Nginx、Apache等）上配置反向代理规则，将所有/api开头的请求转发到目标服务端地址，前端所有接口请求依然保持/api/xxx的写法即可。以Nginx为例，参考配置如下：

location /api/ {
    proxy_pass http://myServer/API/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

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