將 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，那么您的代理將生效。