如何在 Angular + Spring Boot 中配置域或 IP 地址答案

【问题标题】：How to configure domain or IP Address in Angular + Spring Boot如何在 Angular + Spring Boot 中配置域或 IP 地址
【发布时间】：2023-03-05 15:56:02
【问题描述】：

我在 Spring 项目的公共文件夹中有一个 Angular 11 应用程序。 Spring 项目在端口 8075 上运行，如果我从 localhost:8075 访问我的应用程序，一切正常。如果我使用运行 spring 的 ip 地址从另一台机器访问，则会加载页面，但是从 Angular 到 spring rest api 的每次调用都会失败，因为每次调用中的 agular 中的地址都会转到 localhost。如何在 Angular 中配置 api 调用的 url 以从任何可以解析 ip 的客户端访问 spring rest？换句话说，如果服务器在 10.0.0.1 中运行并且从客户端 10.0.0.2 输入 http://10.0.0.1:8075 角度调用转到 10.0.0.1:8075 而不是 localhost

IE：

private urlEndPoint: string = 'http://localhost:8075/api/categorias';
private httpHeaders = new HttpHeaders({'Content-type': 'application/json'})¨

constructor(private http: HttpClient, private router: Router) { }

getCategorias(): Observable<Categoria[]>{
    return this.http.get<Categoria[]>(this.urlEndPoint);
}

谢谢

【问题讨论】：

为此，您应该使用 Angular 环境配置，您将在其中放置 API url，而不是像这样对其进行硬编码。 angular.io/guide/build

标签： java angular spring spring-boot

【解决方案1】：

使用角度配置。当您托管 Spring 后端时，您有仅更改环境文件中的 baseUrl

environment.prod.ts（用于生产服务器）

export const environment = {
  production: true,
  baseUrl: 'http://10.0.0.1:8075/api/',
};

environment.ts（用于开发服务器）

export const environment = {
  production: false,
  baseUrl: 'http://10.0.0.1:8075/api/'
};

在 service.ts 中导入

import {environment} from '../../environments/environment';

那么方法getCategorias()应该是

getCategorias(): Observable<Categoria[]>{
    return this.http.get<Categoria[]>(environment.baseUrl+"categorias");
}

【讨论】：