angular-cli服务器 – 如何将API请求代理到另一台服务器？
使用angular-cli服务器本地开发服务器，它提供了我的项目目录中的所有静态文件。
我怎样才能代理我的AJAX调用不同的服务器？
据我所知，build议使用.ember-cli文件的angular 2.0版本设置代理。 官方的方式如下
-
编辑你的
package.json"start"看下面"start": "ng serve --proxy-config proxy.conf.json", -
在项目的根目录中创build一个名为
"proxy.conf.json"的新文件，并在其中定义如下的代理{ "/api": { "target": "http://api.yourdomai.com", "secure": false } } -
Importnat的事情是，你使用
npm start而不是ng serve
从这里阅读更多： Proxy Setup angular 2 cli
更新2017年
更好的文档现在可用，您可以使用基于json和javascript的configuration： angular-cli文档proxy.md
示例https代理configuration
{ "/angular": { "target": { "host": "github.com", "protocol": "https:", "port": 443 }, "secure": false, "changeOrigin": true, "logLevel": "info" } }
编辑：这个不再在当前的angular度CLI工作
查看来自@imal hasaranga perera的最新解决scheme的答案
angular-cli的服务器来自于ember-cli项目。 要configuration服务器，请在项目根目录下创build一个.ember-cli文件。 在这里添加你的JSONconfiguration：
{ "proxy": "https://api.example.com" }
重新启动服务器，它将代理所有的请求。
例如，我在我的代码中向/v1/foo/123发送了相关请求，该请求正在https://api.example.com/v1/foo/123提取。
您也可以在启动服务器时使用标志： ng serve --proxy https://api.example.com
目前的angular度版本：1.0.0-beta.0
这接近为我工作。 也不得不补充
"changeOrigin": true, "pathRewrite": {"^/proxy" : ""}
完整的proxy.conf.json如下所示：
{ "/proxy/*": { "target": "https://url.com", "secure": false, "changeOrigin": true, "logLevel": "debug", "pathRewrite": {"^/proxy" : ""} } }
我们可以在这里findAngular-CLI的代理文档：
https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md
在根文件夹中设置一个名为proxy.conf.json的文件之后，编辑你的package.json以包含启动时的代理configuration。 在你的脚本中添加“start”：“ng serve –proxy-config proxy.conf.json”之后，运行npm start而不是服务，因为这会忽略package.json中的标志设置。
当前版本的angular-cli：1.1.0
当你需要更多的灵活性时，这是另一种代理方式：
您可以使用“路由器”选项和一些JavaScript代码dynamic地重写目标URL。 为此，您需要在“start”脚本参数列表中指定一个JavaScript文件而不是json文件作为–proxy-conf参数：
"start": "ng serve --proxy-config proxy.conf.js --base-href /"
如上所示，如果您将<base href =“…”>设置为index.html中的某个path，则还需要将–base-href参数设置为/。 这个设置将覆盖这个设置，并且确保正确构buildhttp请求中的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;
请注意，可以通过两种方式使用路由器选项。 一种是当您分配一个包含键值对的对象，其中键是所请求的主机/path匹配，并且该值是重写的目标URL。 另一种方式是当你分配一个自定义代码的function，这是我在这里的例子中展示的。 在后一种情况下，我发现目标选项仍然需要设置为使路由器选项正常工作。 如果将自定义function分配给路由器选项，则不使用目标选项，因此可以将其设置为true。 否则，它需要成为默认的目标url。
Webpack使用http-proxy-middleware，所以你可以在这里find有用的文档： 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将指向活动站点。）
这是另一个工作例子（@ 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
请注意，代理path将被添加到您configuration为目标的任何地方。 所以这样的configuration：
{ "/api": { "target": "http://myhost.com/api, ... } }
并且像http://localhost:4200/api这样的请求将导致对http://myhost.com/api/api的调用。 我认为这里的意图是在开发和生产环境之间没有两条不同的path。 所有你需要做的就是使用/api作为你的基本URL。
所以正确的方法是简单地使用apipath之前的部分，在这个例子中只是主机地址：
{ "/api": { "target": "http://myhost.com", ... } }
