Angular对接两个SpringBoot实例：运行时切换后端方案问询

Angular dev-server的代理配置是启动时静态生效的，无法在运行时动态修改，因此要实现用户通过下拉框切换后端的需求，核心思路是在前端代码层面动态控制请求的目标地址，而非依赖dev-server代理。以下是两种可行方案：

方案一：前端动态配置API地址（推荐，支持运行时切换） #

1. 移除dev-server代理依赖 #

修改Angular启动命令，去掉代理配置参数：

ng serve app --port 4203 --disable-host-check true

2. 创建后端地址管理服务 #

用于存储当前选中的后端地址，并提供切换方法：

// backend-selector.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class BackendSelectorService {
  // 默认指向8553端口的后端
  private currentBackend$ = new BehaviorSubject<string>('http://localhost:8553');
  
  // 对外暴露可订阅的当前后端地址
  get currentBackend() {
    return this.currentBackend$.asObservable();
  }

  // 切换后端方法
  switchBackend(port: string) {
    this.currentBackend$.next(`http://localhost:${port}`);
  }
}

3. 实现HTTP拦截器动态替换请求地址 #

通过拦截器自动修改所有后端请求的目标地址：

// backend-interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { BackendSelectorService } from './backend-selector.service';
import { switchMap } from 'rxjs/operators';

@Injectable()
export class BackendInterceptor implements HttpInterceptor {
  constructor(private backendService: BackendSelectorService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    return this.backendService.currentBackend.pipe(
      switchMap(baseUrl => {
        // 仅处理以/application开头的后端请求
        if (req.url.startsWith('/application')) {
          const newUrl = `${baseUrl}${req.url}`;
          const modifiedReq = req.clone({ url: newUrl });
          return next.handle(modifiedReq);
        }
        return next.handle(req);
      })
    );
  }
}

4. 注册拦截器 #

在AppModule中添加拦截器配置：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { BackendInterceptor } from './backend-interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: BackendInterceptor, multi: true }
  ]
})
export class AppModule {}

5. 实现下拉框切换组件 #

在前端页面添加下拉框，绑定切换逻辑：

// backend-select.component.ts
import { Component } from '@angular/core';
import { BackendSelectorService } from './backend-selector.service';

@Component({
  template: `
    <select (change)="onBackendChange($event)">
      <option value="8553">后端实例 8553</option>
      <option value="8554">后端实例 8554</option>
    </select>
  `
})
export class BackendSelectComponent {
  constructor(private backendService: BackendSelectorService) {}

  onBackendChange(event: Event) {
    const port = (event.target as HTMLSelectElement).value;
    this.backendService.switchBackend(port);
  }
}

6. 配置SpringBoot跨域 #

由于前端直接请求不同端口的后端，需要在SpringBoot中添加CORS配置，允许http://localhost:4203的跨域请求：

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("http://localhost:4203");
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

方案二：启动时切换代理（仅适合开发场景，无运行时切换能力） #

如果一定要依赖dev-server代理，只能通过多配置文件+启动脚本实现启动时切换，无法支持运行时动态切换：

1. 创建两个代理配置文件：
   • proxy-8553.conf.json（原配置，指向8553端口）
   • proxy-8554.conf.json（修改target为http://localhost:8554）
2. 在package.json中添加两个启动脚本：

"scripts": {
  "start:8553": "ng serve app --port 4203 --proxy-config proxy-8553.conf.json --disable-host-check true",
  "start:8554": "ng serve app --port 4203 --proxy-config proxy-8554.conf.json --disable-host-check true"
}

3. 启动时通过执行不同脚本切换后端：

npm run start:8553
# 或
npm run start:8554

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