Angular 2 CLI 中基于环境的不同代理配置

Question

如何在 Angular 2 CLI 项目中为开发和生产环境声明 2 个不同的代理 URL？例如，在开发模式下，我想使用

{
    "/api/*": {
        "target": "http://localhost:3000",
        "secure": false
    }
}

但在生产模式下，我会使用

{
    "/api/*": {
        "target": "http://api.exampledomain.com",
        "secure": false
    }
}

Answer 1

我不相信你可以通过环境文件来控制代理功能。另一种方法是在环境文件

中定义 api 域

// environment.ts
export const environment = {
    production: false,
    api: 'http://localhost:3000'
};

// environment.prod.ts
export const environment = {
    production: true,
    api: 'http://api.exampledomain.com'
}

然后在你的 ts 源文件中从环境文件中提取域

// some service
import { Injectable } from '@angular/core';
import { environment } from '../../../environment.ts';
import { Http } from '@angular/http';

@Injectable()
export class SomeService {
    constructor(private http: Http);

    getData(){
        return this.http.get(environment.api + '/rest-of-api');
    }
}

现在，当您运行构建或提供命令时，它们将使用环境文件

中定义的 api 路径

Answer 2

其实是可以的，你只需要配置路由器即可:

{
    "/api": {
        "target": "https://api.exampledomain.com",
        "secure": false,
        "logLevel": "debug",
        "router": {
          "localhost:4200" : "http://localhost:3000/exampledomain",
          "staging.exampledomain.com" : "http://api.staging.exampledomain.com"
        }
    }
}

这是做什么的：

yout url 匹配代理 => 将调用定义的目标
主机url匹配一个路由器配置=>使用新目标

例如：

我已经在 localhost:4200 上部署了我的 angular 应用程序，当调用 url "api/callMeMaybe" 时，路由器会检测到它并重定向到“http://localhost:3000/exampledomain”。
如果我一直在 staging.exampledomain.com，那么重定向将是“http://api.stagging.exampledomain.com”。
然后，如果 none 匹配，它保持原来的目标重定向。

小心，因为顺序很重要（第一场比赛将进行）

这是documentation with an example

编辑

您可以在 chrome 调试器网络选项卡上找到主机值并选择 api 调用，您会得到以下详细信息：

Angular 2 CLI 中基于环境的不同代理配置

Different proxy config based on environment in Angular 2 CLI

angular2-cli

angular

其实是可以的，你只需要配置路由器即可:

这是做什么的：

例如：

编辑