将 Angular 7 应用程序代理到在不同端口上运行的后端端点

Question

我正在尝试设置一个后端代理，以便在端口 4200 上运行的客户端应用程序上完成的所有请求都被重写到端口 80。

当我运行请求时：

  getTranslation(lang: string): Observable<any> {
    return this.http.get(`/translate?language=${lang}`)
    .pipe(map(response => response));
  }

它应该点击 localhost:80/translate?language="en" 但它却点击 localhost:4200/translate?language="en"。

我尝试通过 angular.json 添加 proxy.conf.json 进行设置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "client-app:build",
    "proxyConfig": "proxy.conf.json"
  },

看起来像这样：

{
  "/api": {
    "target": "http://localhost:80",
    "secure": false
  }
}

但这不起作用。我已经读过它在 Angular 7 中做了一些不同的事情，你通过 ng serve 像这样传递代理：

"docker-start": "ng serve --host 0.0.0.0 --port 4200 --proxy-config proxy.js"

proxy.js 文件为：

var HttpsProxyAgent = require('https-proxy-agent');
var proxyConfig = [{
  context: '/api',
  target: 'http://localhost:80',
  secure: false
}];

function setupForCorporateProxy(proxyConfig) {
  var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
  if (proxyServer) {
    var agent = new HttpsProxyAgent(proxyServer);
    console.log('Using corporate proxy server: ' + proxyServer);
    proxyConfig.forEach(function(entry) {
      entry.agent = agent;
    });
  }
  return proxyConfig;
}

module.exports = setupForCorporateProxy(proxyConfig);

但这似乎也不起作用，并且请求一直针对 localhost:4200。

如果这很重要，应用程序正在 docker 容器中运行。

想法？

Answer 1

代理配置中的上下文部分配置代理会影响哪些路由，因此代理不会干预来自 Angular 应用程序的实际路由。

您的代理配置表明，以 /api 开头的所有内容都将重定向到端口 80。因此，如果您的翻译请求为 /api/translate，那么您的代理将生效。