时间戳

首页 > 解决方案 > 如何在 Angular 应用程序的 environment.prod.ts 中动态配置与后端的连接？

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

问题描述

构建一个前端用 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 地址。

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

谢谢，

莫汉

标签： angularjhipster

解决方案

尝试这个

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

推荐阅读