如何在Angular的environment.prod.ts中动态配置同服务器后端连接

兄弟，这个场景我太熟了——前后端同服务器部署，硬编码localhost导致跨设备访问时后端请求失败，确实头疼！给你几个实用的解决方案，按推荐程度排序：

1. 最靠谱：反向代理+相对路径（适配所有场景） #

因为你的前后端在同一服务器但端口不同，用反向代理是最优雅的解决方式，不管是本地测试还是生产部署都能用：

第一步：修改Angular配置用相对路径 #

把environment.prod.ts里的硬编码地址改成后端接口的相对前缀：

export const environment = { 
  production: true, 
  urlAddress: '/api' // 这里填你后端接口的统一前缀，比如接口都是/api开头的话
};

第二步：生产部署用Nginx做反向代理 #

配置Nginx，把前端的/api请求转发到后端的8085端口，同时托管前端的静态文件。示例Nginx配置：

server {
    listen 4200; # 前端的访问端口
    server_name _;

    # 指向Angular打包后的静态文件目录，比如你的dist文件夹路径
    root /usr/share/nginx/html;
    index index.html;

    # 把所有/api开头的请求转发到后端
    location /api {
        proxy_pass http://localhost:8085; # 后端的地址和端口
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 处理Angular单页应用的路由，避免刷新页面出现404
    location / {
        try_files $uri $uri/ /index.html;
    }
}

这样不管用户用localhost:4200还是服务器IP192.168.43.214:4200访问前端，所有/api开头的请求都会自动转发到同一服务器的后端8085端口，完全不用管服务器IP是什么，适配所有部署场景，还能借助Nginx提升性能和安全性。

2. 快速解决：动态获取服务器IP（无需反向代理） #

如果不想折腾Nginx，直接在Angular代码里动态获取当前访问的主机名，拼接后端端口就行：

先修改environment.prod.ts留空：

export const environment = { 
  production: true, 
  urlAddress: ''
};

然后在你的API服务里动态生成后端地址：

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private backendBaseUrl: string;

  constructor() {
    // 获取当前页面的主机名（比如192.168.43.214或者localhost）
    const hostname = window.location.hostname;
    // 拼接后端的端口8085
    this.backendBaseUrl = `http://${hostname}:8085`;
  }

  // 举个例子，你的请求方法就用这个baseUrl拼接接口路径
  fetchUserList() {
    return fetch(`${this.backendBaseUrl}/api/user/list`);
  }
}

这个方案不用额外配置，直接在代码里动态适配当前IP，缺点是以后后端端口变了的话，得记得改代码里的端口号。

3. 自动化部署用：构建时注入环境变量 #

如果你的项目用CI/CD自动化部署，每次手动改配置太麻烦，可以在构建Angular时动态传入后端地址：

第一步：修改environment.prod.ts读取环境变量 #

export const environment = { 
  production: true, 
  urlAddress: process.env.BACKEND_URL || 'http://localhost:8085'
};

第二步：配置Angular支持环境变量 #

需要装个@angular-builders/custom-webpack插件来让Angular读取环境变量，然后修改angular.json的构建配置：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 其他原有配置...
    }
  }
}

然后创建webpack.config.js文件：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.BACKEND_URL': JSON.stringify(process.env.BACKEND_URL)
    })
  ]
};

第三步：构建时传入后端地址 #

构建的时候直接把服务器IP传进去就行：

BACKEND_URL=http://192.168.43.214:8085 ng build --configuration production

这个方案适合自动化部署的场景，不用手动改配置文件，每次构建时根据环境动态传入地址。

总结一下，反向代理+相对路径是最推荐的方案，不用改代码逻辑，适配所有场景，生产环境用Nginx还能多一层保障。

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