角-cli 服务器-如何代理 API 请求到另一个服务器？

编辑: 这不再工作，在目前的角-CLI

有关最新解决方案，请参见其他答案

The server in angular-cli comes from the ember-cli project. To configure the server, create an .ember-cli file in the project root. Add your JSON config in there:

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

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

For example, I'm making relative requests in my code to /v1/foo/123, which is being picked up at https://api.example.com/v1/foo/123.

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

当前角-cli 版本: 1.0.0-beta.0

更新日期2022

官方推荐的方法现在是 这里记录的那个

2017年最新情况

现在可以使用更好的文档，您可以同时使用这两种方法 基于 JSON 和 JavaScript 的配置: < a href = “ https://github.com/angle/angle-cli/pull/1896”rel = “ noReferrer”> angle-cli 文档代理

Https 代理配置示例

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

To my knowledge with Angular 2.0 release setting up proxies using .ember-cli file is not recommended. official way is like below

1. 编辑你的 package.json的 "start"看下面

   "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 Setup Angular 2 cli

这几乎是为我工作。还必须补充:

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

proxy.conf.json全文如下:

{
"/proxy/*": {
"target": "https://url.com",
"secure": false,
"changeOrigin": true,
"logLevel": "debug",
"pathRewrite": {
"^/proxy": ""
}
}
}

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

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

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

当前版本的 angle-cli: 1.1.0

下面是另一个工作示例(@angle/cli 1.0.4) :

Proxy.con.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

当你需要更多灵活性时，这里有另一种代理方式:

You can use the 'router' option and some javascript code to rewrite the target URL dynamically. 为此，您需要在‘ start’脚本参数列表中指定一个 javascript 文件而不是 json 文件作为—— xy-conf 参数:

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

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

然后，您需要在 proxy.con.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-midware，因此您可以在那里找到有用的文档: 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 和 path’/’，并且使用浏览器插件进行了长时间的保存。如果 Cookie 不存在，URL 将指向活动站点。)

It's important to note that the proxy path 将被附加 to whatever you configured as your target. So a configuration like this:

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

像 http://localhost:4200/api这样的请求将导致对 http://myhost.com/api/api的调用。我认为这里的意图是在开发和生产环境之间不要有两条不同的路径。所有您需要做的就是使用 /api作为您的基本 URL。

因此，正确的方法是简单地使用 api 路径之前的部分，在本例中只使用主机地址:

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

我将在下面的例子中解释你的 需要知道:

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

1. 路径说: 当我在角度应用程序中看到这个路径时(路径可以存储在任何地方) ，我想对它做些什么。* 字符表示子文件夹后面的所有内容都将包含在内。例如，如果在 /文件夹/子文件夹/中有多种字体，* 将选择所有字体

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

3. “ pathRewrite ”: { “ ^/文件夹/子文件夹/”: “/新文件夹/” }, 现在让我们假设你想在本地测试你的应用程序，url http://localhost:1100/folder/sub-folder/可能包含一个无效的路径:/file/sub-file/。如果你想改变路径为正确的 http://localhost:1100/new-folder/路径，那么 pathRewrite 将变得非常有用。它将排除应用程序中的路径(左侧) ，并包括新编写的路径(右侧)

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

5. “ changeOrigin” : 只有当主机目标不是当前环境时，才需要选项，例如: localhost。如果您想将主机更改为 Www.something.com，这将是代理中的目标，那么将 changeOrigin 属性设置为“ true”:

6. “ logLevel” : 属性指定开发人员是否希望在其终端/cmd 上显示代理，因此他将使用图像中显示的“ debug”值