在 Angular 应用程序中配置 API URL

Question

我目前正在使用 proxy.conf.json 配置 API url 用于开发。我相信它只适用于本地服务器。在 UAT 和生产服务器上部署时如何配置 API url？我想更改服务器上的 API url 而无需重新构建整个应用程序。

proxy.conf.json:

{
    "/api": {
      "target": "http://api_server:88",
      "secure": false,
      "pathRewrite": {
      "^/api": ""
    },
      "changeOrigin": true
    }
  }

api.service.ts:

get<T>(params: any = {}) : Observable<T> {
    return this.http.get<T>("/api/data", {params: params});
}

Answer 1

proxy.conf.json 文件中的代理配置用于您的 Webpack 开发服务器使用 ng serve 命令在本地运行您的 Angular 应用程序。它不应用于生产和暂存环境。您可以在官方 Angular docs 页面中找到有关此内容的详细信息。

如果您想向您的 NodeJ 或任何其他托管您的 angular 应用程序的服务器添加类似功能，请检查 API 网关插件是否可用于您正在使用的服务器。

如果您不知道 API 网关，请检查此 article。

Answer 2

这种方式对我们很有效：

创建自定义 HTTP 服务并构建一个函数来检查当前 URL。

custom-http.service.ts <- 您可以根据您的公司/应用名称命名此名称

@Injectable()
export class CustomHttpService {

    constructor(private http: HttpClient) {
    }

    public getCurrentEnvironment(): string {
        const host = window.location.origin;
        let env = "";
        switch(host) {
            case 'http://localhost:4200': {
                env = 'LOCALDEV';
                break;
            }
            case 'https://my-test-site.azurewebsites.net': {
                env = 'TEST';
                break;
            }
            case 'https://my-prod-site.azurewebsites.net': {
                env = 'PROD';
                break;
            }
            case 'https://customdomain.com': {
                env = 'PROD';
                break;
            }
            default: {
                env = 'PROD';
                break;
            }

        }
        return env;
    }

    public get(url: string): Observable<any> {
        return this.http.get(url);
    }

    public getWithHeader(url: string, header: HttpHeaders): Observable<any> {
        return this.http.get(url, {headers: header});
    }

    public post(url: string, body: any): Observable<any> {
        return this.http.post(url, body);
    }

    public put(url: string, body: any): Observable<any> {
        return this.http.put(url, body);
    }

    public delete(url: string): Observable<any> {
        return this.http.delete(url);
    }
}

您可以从应用中的任何位置调用 getCurrentEnvironment() 以了解您所处的环境。

创建一个 URL 帮助程序服务，这将为您的特定环境传递正确的 API url。

@Injectable()
export class URLHelper {
    constructor(private httpService: CustomHttpService) {

    }

    private env: string = this.httpService.getCurrentEnvironment();
    private Server: string = this.getServerUrl(this.env);

    getServerUrl(env: string): string {
        let server = "";
        switch (env) {
            case "LOCALDEV": {
                server = "http://localhost/project/";
                break;
            }
            case "TEST": {
                server = "https://my-test-site-api.azurewebsites.net/";
                break;
            }
            case "PROD": {
                server = "https://my-prod-site-api.azurewebsites.net/";
                break;
            }
            default: {
                console.error('No Env Found');
                server = "https://my-prod-site-api.azurewebsites.net/";
            }
        }
        return server;
    }

    // Here you will define all the API endpoints your app will use and 'this.Server ' will contain the proper host API server url at runtime for each environment.
    public User = this.Server + 'api/User';

用法。现在要使用它，您需要做的就是在任何功能模块服务中，将 CustomHttpService 和 URLHelper 添加到构造函数中

@Injectable()
export class AdminService {

    constructor(private urlHelper: URLHelper, private httpService: CustomHttpService) { }

    getUser(): Observable<any> {
        return this.httpService.get(this.urlHelper.User);
    }

}

在 Angular 应用程序中配置 API URL

Configure API URL in Angular application

typescript

angular-config

angular