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"
        }
    }
}

这是做什么的：

• 您的网址与代理匹配=>将调用已定义的目标
• 主机URL匹配一个路由器配置=>使用新目标

例如 ：

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

请注意，因为顺序很重要（第一场比赛将进行）

这是带有示例的文档

编辑

您可以在Chrome调试器的“网络”标签上找到主机值，然后选择api调用，即可获得以下详细信息：