angular - 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": {
        "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 ”。
然后，如果没有匹配，它保持原来的目标重定向。

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

这是 documentation用 example

编辑

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