Angular项目动态API调用问题：IIS同服务器外网无法获取数据

方法1：使用相对路径调用API #

直接移除硬编码的内网IP，改用相对路径，这样UI会自动请求当前部署域名下的对应API接口，同时适配内网和外网访问场景。

修改后的代码：

export class BomService {

  constructor(private http: HttpClient) { }

  GetAllBomList(): Observable<IBom[]> {
    // 用相对路径替代固定内网IP
    return this.http.get<IBom[]>('/api/bom/getallboms');
  }
}

只需确保IIS上已将API服务映射到/api路径（比如把API应用程序的虚拟目录设置为api），即可正常完成请求转发。

方法2：配置IIS反向代理（API与UI为独立站点时） #

如果API和UI是同一服务器上的两个独立IIS站点（比如UI用80端口，API用5000端口），可通过反向代理实现请求转发：

1. 安装IIS的URL重写和应用程序请求路由（ARR）模块
2. 在UI站点的web.config中添加重写规则：

<system.webServer>
  <rewrite>
    <rules>
      <rule name="ForwardToAPI" stopProcessing="true">
        <match url="^api/(.*)" />
        <action type="Rewrite" url="http://localhost:5000/api/{R:1}" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

配置完成后，UI用相对路径/api/bom/getallboms发起的请求，会被IIS自动转发到本地5000端口的API服务，外网用户也能正常访问。

方法3：通过环境变量配置API地址 #

如果需要区分开发、生产环境的API地址（比如开发用内网IP，生产用相对路径），可借助框架的环境变量功能（以Angular为例）：

1. 在src/environments目录下配置不同环境的地址：

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

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

2. 修改BomService代码，引入环境变量：

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

export class BomService {
  private apiBaseUrl = environment.apiBaseUrl;

  constructor(private http: HttpClient) { }

  GetAllBomList(): Observable<IBom[]> {
    return this.http.get<IBom[]>(`${this.apiBaseUrl}/bom/getallboms`);
  }
}

打包生产环境代码时，会自动使用生产环境的配置，避免硬编码导致的环境适配问题。

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