如何从Spring Boot动态获取服务地址至Angular 7路由中

针对你遇到的问题，我整理了几个实用方案，能让Angular自动适配Spring Boot的服务地址，彻底告别硬编码：

方案一：利用Angular环境配置文件（推荐） #

Angular自带的环境配置机制，能让你根据开发/生产环境分别配置后端地址，修改起来非常方便。

1. 打开src/environments目录下的配置文件：

// environment.ts（开发环境）
export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8080'
};

// environment.prod.ts（生产环境）
export const environment = {
  production: true,
  apiBaseUrl: 'https://your-production-api-domain.com'
};

2. 在你的业务服务中导入配置，动态拼接接口路径：

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

export class YourDataService {
  private apiBase = environment.apiBaseUrl;

  // 动态生成接口地址
  deleteUrl = `${this.apiBase}/home/delete/`;
  updateUrl = `${this.apiBase}/home/update/`;

  constructor(private http: HttpClient) {}

  // 调用示例
  deleteItem(id: number) {
    return this.http.delete(`${this.deleteUrl}${id}`);
  }
}

以后Spring Boot端口变更时，只需要修改environment.ts里的地址，Angular会自动同步生效。

方案二：反向代理统一接口前缀（开发更优雅） #

开发阶段可以配置Angular反向代理，把前端的API请求自动转发到Spring Boot服务，前端代码只用写相对路径，完全不用关心后端地址。

1. 项目根目录创建proxy.conf.json：

{
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

2. 修改angular.json的启动配置，添加代理引用：
   找到architect -> serve -> options，新增一行配置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build",
    "proxyConfig": "proxy.conf.json"
  }
}

3. 服务中直接用相对路径：

export class YourDataService {
  deleteUrl = '/api/home/delete/';
  updateUrl = '/api/home/update/';

  constructor(private http: HttpClient) {}

  deleteItem(id: number) {
    return this.http.delete(`${this.deleteUrl}${id}`);
  }
}

后端端口变更时，只需要修改proxy.conf.json里的target值，重启Angular服务就生效。生产环境部署时，用Nginx等服务器配置反向代理即可，前端代码无需改动。

方案三：从后端动态获取地址（适合动态部署场景） #

如果你的Spring Boot服务地址可能在运行时动态变化（比如容器化部署端口随机分配），可以让Angular在初始化时主动从后端获取基础地址。

1. Spring Boot新增一个返回自身地址的接口：

@RestController
@RequestMapping("/api")
public class ConfigController {
    @GetMapping("/base-url")
    public ResponseEntity<String> getBaseUrl(HttpServletRequest request) {
        // 自动拼接当前服务的完整基础地址
        String baseUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort();
        return ResponseEntity.ok(baseUrl);
    }
}

2. Angular创建全局配置服务和初始化器：
   首先创建全局配置服务：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AppConfigService {
  apiBaseUrl!: string;
}

然后写初始化服务，在App启动前获取后端地址：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AppConfigService } from './app-config.service';

@Injectable()
export class AppInitializer {
  constructor(private http: HttpClient, private appConfig: AppConfigService) {}

  initialize() {
    return () => this.http.get<string>('/api/base-url')
      .toPromise()
      .then(url => {
        this.appConfig.apiBaseUrl = url;
      })
      .catch(err => {
        console.error('加载后端地址失败', err);
        // 失败时设置默认地址作为降级方案
        this.appConfig.apiBaseUrl = 'http://localhost:8080';
      });
  }
}

3. 在app.module.ts中配置初始化器：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppInitializer } from './app-initializer';
import { AppConfigService } from './app-config.service';

export function appInitializerFactory(initializer: AppInitializer) {
  return initializer.initialize();
}

@NgModule({
  providers: [
    AppConfigService,
    AppInitializer,
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [AppInitializer],
      multi: true
    }
  ]
})
export class AppModule {}

4. 业务服务中使用全局配置：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AppConfigService } from './app-config.service';

@Injectable({ providedIn: 'root' })
export class YourDataService {
  constructor(private http: HttpClient, private appConfig: AppConfigService) {}

  deleteItem(id: number) {
    const deleteUrl = `${this.appConfig.apiBaseUrl}/home/delete/${id}`;
    return this.http.delete(deleteUrl);
  }
}

这个方案能完全适配后端地址动态变化的场景，非常适合云原生部署的情况。

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