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

Question

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

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

Answer 1

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

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

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

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

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

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

从这里阅读更多内容:代理设置Angular 2 cli

2017年更新

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

示例https代理配置

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

Answer 2

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

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

    {
      "/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 services Angular-proxying to a backend server

Answer 3

我会在这个例子中解释你需要知道的一切:

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

1. / folder/sub-folder/* path说:当我在angular 2应用程序中看到这条路径时(路径可以存储在任何地方)我想用它做点什么.*字符表示将包含子文件夹后面的所有内容.例如,如果/ 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. "secure"属性表示我们使用的是http或https.如果在目标属性中使用https,则将secure属性设置为true,否则将其设置为false

5. "changeOrigin":仅当主机目标不是当前环境时才需要选项,例如:localhost.如果要将主机更改为www.something.com,这将是代理中的目标,则将changeOrigin属性设置为"true":

6. "logLevel"属性指定开发人员想要在他的终端上输出代理,因此他将使用图像上显示的"debug"值

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

如果它有效,你应该在你的cmd /终端中看到类似的东西

Answer 4

这对我来说很接近.还必须添加:

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

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

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

Answer 5

编辑:这在当前的ANGULAR-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

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

Answer 6

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

您可以使用 'router' 选项和一些 javascript 代码来动态重写目标 URL。为此，您需要在“开始”脚本参数列表中指定一个 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 将指向实时站点。）

Answer 7

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

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

第2步：转到package.json，在“start”下找到“scripts”

"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

Answer 8

1. 在 proxy.conf.json 中添加，所有对 /api 的请求将被重定向到 htt://targetIP:targetPort/api。

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

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

3. 在代码中 let url = "/api/clnsIt/dev/78"; 该 url 将被转换为 http://targetIP:targetPort/api/clnsIt/dev/78。

4. 您还可以通过填充pathRewrite来强制重写。这是详细信息的链接 cmd/NPM 控制台将记录类似“将路径从“/api/...”重写为“http://targeturl:targetPort/api/..”，而浏览器控制台将记录“http: //loclahost/api”

Answer 9

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

代理配置文件

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 10

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

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

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

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

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