如何在 Angular 应用程序的 environment.prod.ts 中动态配置与后端的连接？

Question

构建一个应用程序，其前端用 Angularjs 开发，后端用 Java（maven）开发。

下面是 Angular 与后端通信的 environment.prod.ts 文件。

export const environment = {
  production: true,
  urlAddress: 'http://localhost:8085'
};

到目前为止，在本地部署了应用程序，我按如下方式启动前端和后端，应用程序在本地机器上运行良好 - localhost:4200

frontend 
ng server --host 0.0.0.0

backend
java -jar backend.jar

当我尝试从同一网络中的不同系统访问该应用程序时出现问题。我可以使用系统部署的 IP 地址（如下所示）而不是 localhost:4200 来访问前端。

192.168.43.214:4200

但是到后端的连接不起作用，当我进行浏览器检查时，发现它尝试访问 localhost:8085 作为后端，因为在 environment.prod.ts 文件中硬编码了 IP 地址 localhost:8085。

当我尝试使用系统 IP 地址单独访问 java 后端服务时，jhipster 页面出现并且工作正常。

192.168.43.214:8085

如下配置的 prod 文件解决了这个问题

export const environment = {
  production: true,
  urlAddress: 'http://192.168.43.214:8085'
};

但是我必须事先知道要运行后端服务的系统的 IP 地址。

由于前端和后端都将在同一台服务器上运行。如何让 angular 使用自己的 IP 地址进行后端连接。

谢谢，

莫汉

Answer 1

尝试这个

export const environment = {
  production: true,
  urlAddress: 'http://' + window.location.hostname + ':8085'
};