angular-cli服务器-如何将API请求代理到另一台服务器？

86

使用angular-cli ng serve本地开发服务器，它可以提供我项目目录中的所有静态文件。

如何将我的AJAX呼叫代理到其他服务器？

angular  angular-cli 
— 埃尔温
source

Answers:

168

更新2017

现在可以使用更好的文档，并且您可以使用基于JSON和JavaScript的配置：angular-cli文档代理

样本https代理配置

{
  "/angular": {
     "target":  {
       "host": "github.com",
       "protocol": "https:",
       "port": 443
     },
     "secure": false,
     "changeOrigin": true,
     "logLevel": "info"
  }
}

据我所知，使用Angular 2.0版本时，不建议使用.ember-cli文件设置代理。官方方式如下

  1. 编辑"start"您的内容package.json以查看下方

    "start": "ng serve --proxy-config proxy.conf.json",

  2. proxy.conf.json在项目的根目录中创建一个新文件，并在其中定义您的代理，如下所示

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

  3. 重要的是您使用npm start而不是ng serve

从此处了解更多信息：Proxy设置Angular 2 CLI

— 动物哈萨兰加佩雷拉
source
1
如何处理“不安全”的凭证。使用节点，我可以将process.env.NODE_TLS_REJECT_UNAUTHORIZED设置为0，并通过该安全性，但是我不知道如何使用proxy.config.json来实现。这就是所有的开发堆栈，我不介意是否感到不安全
— nicowernli
1
具有“ secure”：false应该可以，应该是布尔值而不是字符串...我通过将其保持为“ false”花费了无数的时间
— imal hasaranga perera
这对我有用，但是与代理一起最终却像/api/api/person为什么这样发生的任何想法？
— ocespedes '17
可以分享您的proxy.conf.json以便我看看吗？
— imal hasaranga perera
2
proxy.conf.json的文档在哪里？
— 举行了
44

我将在以下示例中说明您需要了解的内容：

{
  "/folder/sub-folder/*": {
    "target": "http://localhost:1100",
    "secure": false,
    "pathRewrite": {
      "^/folder/sub-folder/": "/new-folder/"
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

  1. / folder / sub-folder / *：路径说：当我在我的角度应用程序中看到该路径时（该路径可以存储在任何地方），我想对其进行处理。*字符表示将包含子文件夹之后的所有内容。例如，如果您在/ folder / sub-folder /中包含多种字体，则*将选中所有字体

  2. 上面路径的“ target”：“ http：// localhost：1100 ”使目标 URL成为主机/源，因此在后台，我们将具有http：// localhost：1100 / folder / sub-folder /

  3. “ pathRewrite ”：{“ ^ / folder / sub-folder /”：“ / new-folder /”}，现在，假设您要在本地测试应用程序，即http：// localhost：1100 / folder / sub-文件夹/可能包含无效路径：/ folder / sub-folder /。您想将此路径更改为http：// localhost：1100 / new-folder /的正确路径，因此pathRewrite将变得非常有用。它将排除应用程序中的路径（左侧），并包括新编写的路径（右侧）

  4. “安全”：表示我们正在使用http还是https。如果在目标属性中使用https，则将secure属性设置为true，否则将其设置为false

  5. “ changeOrigin”：选项仅在您的主机目标不是当前环境时才是必需的，例如：localhost。如果要将主机更改为www.something.com（这将是代理中的目标），则将changeOrigin属性设置为“ true”：

  6. “ logLevel”：属性指定开发者是否要在其终端/ cmd上输出代理，因此，他将使用“ debug”值，如图所示

通常，代理有助于在本地开发应用程序。您将文件路径设置为用于生产目的，如果您在项目中本地拥有所有这些文件，则可以使用代理访问它们，而无需在应用程序中动态更改路径。

如果可行，您应该在cmd /终端中看到类似的内容。

在此处输入图片说明

— 尤金·桑尼奇
source
1
谢谢，这是当前Angular版本的正确答案。不过，仅当您的目标不是localhost时，才需要“ changeOrigin”选项。另外，您还需要通过运行带有标志的负载来加载代理配置文件，ng serve --proxy-config proxy.conf.json显然会忽略package.json中的标志（如前面的示例所示）。
— 安德鲁
28

这接近为我工作。还必须添加：

"changeOrigin": true,
"pathRewrite": {"^/proxy" : ""}

完整proxy.conf.json显示如下：

{
    "/proxy/*": {
        "target": "https://url.com",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": {
            "^/proxy": ""
        }
    }
}
— 托尼·塞亚洛（Tony Scialo）
source
10

编辑：这在当前的角度CLI中不再起作用

请参阅@imal hasaranga perera的答案以获取最新解决方案

服务器angular-cli来自ember-cli项目。要配置服务器，请.ember-cli在项目根目录中创建一个文件。在其中添加您的JSON配置：

{
   "proxy": "https://api.example.com"
}

重新启动服务器，它将代理那里的所有请求。

例如，我在代码中向发出了相关请求/v1/foo/123，该请求在处提取https://api.example.com/v1/foo/123。

您还可以在启动服务器时使用标志： ng serve --proxy https://api.example.com

当前的angular-cli版本：1.0.0-beta.0

— 埃尔温
source
1
感谢您的回答@elwyn。是否可以仅代理匹配某些模式的网址，例如“ / api / v1 /”？
— 玛丽安（Marian Zagoruiko）'16
我不确定-我不需要这样做。网络服务器只是ember-cli引擎盖下的东西（无论如何，到目前为止），所以也许看看他们的文档？这个人似乎有一个运行自定义代理的示例：stackoverflow.com/q/30267849/227622
— elwyn
昨天做到了。正如您所说，这只是香草ember-cli。因此，我创建了一个ember应用程序，在其中生成了代理（在angular-cli中尚无此类生成器），然后将其复制到我的angular应用程序中。效果不错。谢谢。
— 玛丽安·扎戈瑞科
6

当您需要更大的灵活性时，这是另一种代理方式：

您可以使用“路由器”选项和一些JavaScript代码来动态重写目标网址。为此，您需要在“开始”脚本参数列表中指定一个javascript文件而不是json文件作为--proxy-conf参数：

"start": "ng serve --proxy-config proxy.conf.js --base-href /"

如上所示，如果您将<base href =“ ...”>设置为index.html中的路径，则还需要将--base-href参数设置为/。此设置将覆盖此设置，并且有必要确保正确构建http请求中的URL。

然后，您需要在proxy.conf.js（不是json！）中包含以下内容或类似内容：

const PROXY_CONFIG = {
    "/api/*": {
        target: https://www.mydefaulturl.com,
        router: function (req) {
            var target = 'https://www.myrewrittenurl.com'; // or some custom code
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

请注意，可以以两种方式使用路由器选项。一种是当您分配一个包含键值对的对象时，其中键是要匹配的请求主机/路径，而值是重写的目标URL。另一种方法是在给函数分配一些自定义代码时，这就是我在此处的示例中所演示的内容。在后一种情况下，我发现仍然需要将目标选项设置为某种值才能使路由器选项起作用。如果将自定义功能分配给路由器选项，则不会使用目标选项，因此可以将其设置为true。否则，它必须是默认的目标URL。

Webpack使用http-proxy-middleware，因此您会在此处找到有用的文档：https : //github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options

以下示例将从cookie中获取开发人员名称，以使用自定义函数作为路由器来确定目标URL：

const PROXY_CONFIG = {
    "/api/*": {
        target: true,
        router: function (req) {
            var devName = '';
            var rc = req.headers.cookie;
            rc && rc.split(';').forEach(function( cookie ) {
                var parts = cookie.split('=');
                if(parts.shift().trim() == 'dev') {
                    devName = decodeURI(parts.join('='));
                }
            });
            var target = 'https://www.'+ (devName ? devName + '.' : '' ) +'mycompany.com'; 
            //console.log(target);
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

（该cookie为localhost和路径'/'设置，并且使用浏览器插件的有效期很长。如果该cookie不存在，则URL指向实际站点。）

— 佐坦·M
source
3

我们可以在这里找到Angular-CLI的代理文档：

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

在根文件夹中设置一个名为proxy.conf.json的文件后，请编辑package.json以在ng start上包含代理配置。在脚本中添加“ start”：“ ng serve --proxy-config proxy.conf.json”后，请运行npm start而不是ng serve，因为这将忽略package.json中的标志设置。

当前版本的angular-cli：1.1.0

— 卢克·舍恩马克
source
3

重要的是要注意，代理路径将附加到您配置为目标的任何内容上。所以这样的配置：

{
  "/api": {
    "target": "http://myhost.com/api,
    ...
  }
}

，这样的请求http://localhost:4200/api将导致对的调用http://myhost.com/api/api。我认为这里的目的是在开发和生产环境之间没有两条不同的道路。您需要做的只是将其/api用作基本URL。

因此正确的方法是仅使用api路径之前的部分，在这种情况下，仅使用主机地址：

{
  "/api": {
    "target": "http://myhost.com",
    ...
  }
}
— 密码音乐
source
2

步骤1：转到您的根文件夹创建proxy.conf.json

{
  "/auth/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}
展开摘要

第2步：转到package.json，在该脚本下找到“开始”，然后找到“脚本”

"start": "ng serve --proxy-config proxy.conf.json",
展开摘要

步骤3：现在在您的http中添加/ auth /

 return this.http
      .post('/auth/register/', { "username": 'simolee12', "email": 'xyz@gmail.com', "password": 'Anything@Anything' });
  }
展开摘要

步骤4：在终端运行 npm start的最后一步

— 亚什·桑加维（Yash Sanghavi）
source
2

如果某人正在寻找到同一目标或基于TypeScript的配置的多个上下文条目。

proxy.conf.ts

const proxyConfig = [
  {
    context: ['/api/v1', '/api/v2],
    target: 'https://example.com',
    secure: true,
    changeOrigin: true
  },
  {
    context: ['**'], // Rest of other API call
    target: 'http://somethingelse.com',
    secure: false,
    changeOrigin: true
  }
];

module.exports = proxyConfig;

ng serve --proxy-config =。/ proxy.conf.ts -o

— 普拉哈托贾
source
1

这是另一个工作示例（@ angular / cli 1.0.4）：

proxy.conf.json： 

{
  "/api/*" : {
    "target": "http://localhost:8181",
    "secure": false,
    "logLevel": "debug"
  },
  "/login.html" : {
    "target": "http://localhost:8181/login.html",
    "secure": false,
    "logLevel": "debug"
  }
}

运行：

ng serve --proxy-config proxy.conf.json
— 帕特里斯
source
1

Cors来源问题屏幕截图

我的应用程序中遇到了Cors问题。请参考上面的截图。添加代理配置后，问题已解决。我的应用程序网址：localhost：4200并请求api网址：“ http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= ”

允许使用Api端无费用的权限。而且我也不能在服务器端更改cors-issue，而只能在angular（客户端）更改。

解决步骤：

  1. 在src文件夹中创建proxy.conf.json文件。 
   {
      "/maps/*": {
        "target": "http://www.datasciencetoolkit.org",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
      }
    }
  1. 在Api请求中 
this.http
      .get<GeoCode>('maps/api/geocode/json?sensor=false&address=' + cityName)
      .pipe(
        tap(cityResponse => this.responseCache.set(cityName, cityResponse))
      );

注意：我们在Api请求中跳过了主机名名称url，它将在发出请求时自动添加。每当更改proxy.conf.js时，我们必须重新启动ng-serve，然后只有更改会更新。

  1. angular.json中的配置代理
"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "TestProject:build",
            "proxyConfig": "src/proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "TestProject:build:production"
            }
          }
        },

完成这些步骤后，请重新启动ng-serve Proxy，使其按预期正常工作

> WARNING in
> D:\angular\Divya_Actian_Assignment\src\environments\environment.prod.ts
> is part of the TypeScript compilation but it's unused. Add only entry
> points to the 'files' or 'include' properties in your tsconfig.
> ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** : Compiled
> successfully. [HPM] GET
> /maps/api/geocode/json?sensor=false&address=chennai ->
> http://www.datasciencetoolkit.org
— dineshk033
source
0

  1. 添加proxy.conf.json

    { "/api": { "target": "http://targetIP:9080", "secure": false, "pathRewrite": {"^/proxy" : ""}, "changeOrigin": true, "logLevel": "debug" } }

    1. 在package.json中，使 "start": "ng serve --proxy-config proxy.conf.json"

    2. 在代码中让url =“ / api / clnsIt / dev / 78”; 该网址将被翻译为http：// targetIP：9080 / api / clnsIt / dev / 78

— 张峰
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.