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

Question

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

如何将我的 AJAX 调用代理到不同的服务器？

Answer 1

编辑：这在当前 ANGULAR-CLI

中不再有效

查看其他答案以获得最新的解决方案

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

Answer 2

2022 年更新

现在官方推荐的方法是

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 文件设置代理。官方方式如下

编辑 package.json 的 "start" 以查看下方

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

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

Answer 3

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

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

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

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

Answer 4

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

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

在您的根文件夹中设置名为 proxy.conf.json 的文件后，编辑您的 package.json 以在 ng 启动时包含代理配置。添加 "start": "ng serve --proxy-config proxy.conf.json" 到您的脚本后，运行 npm start 而不是 ng serve，因为这将忽略 package.json.

中的标志设置

angular-cli 的当前版本：1.1.0

Answer 5

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

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

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

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

如上所示，如果您将设置为 index.html 中的路径，则 --base-href 参数也需要设置为 /。此设置将覆盖它，并且有必要确保正确构造 http 请求中的 URLs。

那么你的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;

请注意，路由器选项有两种使用方式。一种是当您分配一个包含键值对的对象时，其中键是请求 host/path 匹配，值是重写的目标 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 是为本地主机和路径 '/' 设置的，使用浏览器插件过期很长。如果 cookie 不存在，URL 将指向实时站点。）

Answer 7

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

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

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

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

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

Answer 8

我将在下面的示例中解释您需要了解的内容：

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

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

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

如果有效，您应该会在 cmd/terminal 中看到类似的内容。

Answer 9

加入proxy.conf.json，所有到/api的请求都会重定向到htt://targetIP:targetPort/api.

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

在package.json中，制作 "start": "ng serve --proxy-config proxy.conf.json"
在代码中让 url = "/api/clnsIt/dev/78"; 这个 url 将被翻译成 http://targetIP:targetPort/api/clnsIt/dev/78.
也可以通过填写pathRewrite来强制重写。 This is the link for details cmd/NPM 控制台将记录类似“从“/api/...”到“http://targeturl:targetPort/api/..”的重写路径，而浏览器控制台将记录“http://loclahost/api”

Answer 10

Cors-origin issue screenshot

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

Api 允许侧 no-cors 权限。而且我也无法在服务器端更改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

如果有人正在寻找同一目标或基于 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 12

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

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

步骤 2:Go 到 package.json 在找到“开始”下找到“脚本”

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

步骤 3:now 在您的 http

添加 /auth/

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

步骤 4:Final 进入终端运行 npm 启动

Answer 13

目前从Angular12开始，官方的做法是这样的：

在项目的 /src 文件夹中创建一个名为 proxy.conf.json 的文件，并用它来定义代理：

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

更改 angular.json 文件以在运行时包含代理：

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
...

请注意，您可以根据配置进行设置，因此如果您只想在开发环境中配置代理（通常在生产环境中，您会使用 HTTP 服务器来管理代理），您可以这样配置：

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "production": {
      "browserTarget": "your-application-name:build",
    },
    "development": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
...

现在，当您运行 ng serve 时，它会正确地代理请求。

完整的文档在这里：Building and serving Angular- proxying to a backend server

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

angular-cli server - how to proxy API requests to another server?

angular-cli

angular

2022 年更新

2017 年更新