2017年更新

Question

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

如何将我的AJAX调用代理到其他服务器？

Answer 1

2017年更新

现在可以使用更好的文档，您可以同时使用它们基于JSON和JavaScript的配置：angular-cli documentation proxy

示例https代理配置

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

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

修改"start"的{{1}}以查看下方

package.json
在项目的根目录中创建一个名为"start": "ng serve --proxy-config proxy.conf.json",的新文件，并在其中定义您的代理，如下所示
```
proxy.conf.json
```
重要的是您使用{ "/api": { "target": "http://api.yourdomai.com", "secure": false } }代替npm start

从这里阅读更多内容：Proxy Setup Angular 2 cli

Answer 2

这对我来说很接近。还必须添加：

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

如下所示的完整proxy.conf.json：

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

Answer 3

我将在此示例中解释您需要知道的所有内容：

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

/ folder / sub-folder / * 路径说：当我在angular 2应用程序中看到这条路径时（路径可以存储在任何地方）我想用它做点什么。 *字符表示将包含子文件夹后面的所有内容。例如，如果你在 / folder / sub-folder / 中有多个字体，*将会获取所有字体
“target”：“http://localhost:1100”对于上面的路径，使目标 url主机/来源，因此在后台我们会有http://localhost:1100/folder/sub-folder/
“pathRewrite ”：{ “^ / folder / sub-folder /”：“/ new-folder /” }，现在假设您要在本地测试您的应用程序，http://localhost:1100/folder/sub-folder/可能包含在无效路径中：/ folder / sub-folder /。您希望将此路径更改为http://localhost:1100/new-folder/的正确路径，因此pathRewrite将变得非常有用。它将排除应用程序中的路径（左侧）并包括新写入的路径（右侧）
“安全”属性表示我们使用的是http或https。如果在目标属性中使用https，则将secure属性设置为true，否则将其设置为false
“changeOrigin”：仅当主机目标不是当前环境时才需要选项，例如：localhost。如果要将主机更改为www.something.com，这将是代理中的目标，则将changeOrigin属性设置为“true”：
“logLevel”属性指定开发人员想要在其终端上输出代理，因此他将使用“调试”值，如图所示

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

如果有效，您应该在cmd / terminal

Answer 4

编辑：在当前的角度CLI中没有更长时间的工作

请参阅@imal hasarang 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处获取。

启动服务器时也可以使用标志： {{1}}

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

Answer 5

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

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

在根文件夹中设置名为proxy.conf.json的文件后，编辑package.json以在ng start中包含代理配置。添加＆＃34;开始＆＃34;：＆＃34; ng serve --proxy-config proxy.conf.json＆＃34;到你的脚本，运行npm start而不是ng serve，因为这将忽略package.json中的标志设置。

当前版本的angular-cli：1.1.0

Answer 6

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

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

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

如上所示，如果另外设置＆lt; base href =“...”＆gt;，则还需要将--base-href参数设置为/。到index.html中的路径。此设置将覆盖该设置，并且必须确保正确构建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将指向实时站点。）

Answer 7

如果有人要为同一目标或基于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

Answer 8

步骤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开始

Answer 9

这是另一个工作示例（@ 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

Answer 10

Cors-origin issue screenshot

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

允许Api端无核心权限。而且我也无法在服务器端更改cors-issue，而只能在angular（客户端）更改。

解决步骤：

在src文件夹中创建proxy.conf.json文件。

   {
      "/maps/*": {
        "target": "http://www.datasciencetoolkit.org",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
      }
    }

在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，然后只有更改会更新。

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 working correctly as expect refer here

> 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

Answer 11

请务必注意代理路径将附加到您配置为目标的任何内容。所以这样的配置：

str.replace("+", "")

和{ "/api": { "target": "http://myhost.com/api, ... } }之类的请求会调用http://localhost:4200/api。我认为这里的意图是在开发和生产环境之间没有两条不同的路径。您需要做的就是使用http://myhost.com/api/api作为基本网址。

所以正确的方法是简单地使用api路径之前的部分，在这种情况下只是主机地址：

/api

Answer 12

添加proxy.conf.json

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

中，使 "start": "ng serve --proxy-config proxy.conf.json"
在代码中让url =“ / api / clnsIt / dev / 78”; 该网址将被翻译为http：// targetIP：9080 / api / clnsIt / dev / 78

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

12 个答案:

2017年更新