Backend proxy behind corporate proxy does not work

[sinedied]

OS?

Mac OSX El Capitan 10.11.6

Versions.

angular-cli: 1.0.0-beta.25.5
node: 5.0.0
os: darwin x64
@angular/common: 2.4.3
@angular/compiler: 2.4.3
@angular/core: 2.4.3
@angular/forms: 2.4.3
@angular/http: 2.4.3
@angular/platform-browser: 2.4.3
@angular/platform-browser-dynamic: 2.4.3
@angular/router: 3.4.3
@angular/compiler-cli: 2.4.3

Repro steps.

I work behind a corporate proxy (like many of us), and because of this, the backend proxy fails to make the actual http calls because it does not use the corporate proxy.

Here is my proxy.conf.json setup:

[
  {
    "context": "/api",
    "pathRewrite": { "^/api": "" },
    "target": "http://api.icndb.com",
    "changeOrigin": true
  }
]

The log given by the failure.

This is the error output in the console:

[HPM] Error occurred while trying to proxy request /jokes/random?escape=javascript&limitTo=[nerdy] from localhost:4200 to http://api.icndb.com (ETIMEDOUT) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Mention any other details that might be useful.

With my old gulp-based setup, I was able to easily fix this issue by providing a custom Http Agent to the http-proxy-middleware module. The agent just looks at the http_proxy or HTTP_PROXY environment variable, and setup the corporate proxy if found.

/**
 * Configures a corporate proxy agent for the API proxy.
 */
exports.corporateProxyAgent = function() {
  var agent = null;
  var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;

  if (proxyServer) {
    agent = new HttpsProxyAgent(proxyServer);
    gutil.log(gutil.colors.cyan('Using corporate proxy server: ' + proxyServer));
  }

  return agent;
};

I could do the same here if the options were not stored in a JSON file, but a regular js file, maybe that would be the simplest way to fix this issue?

[sinedied]

I experimented a little and found that the proxy config could actually be a JS file, so I added my old fix to have this in proxy.conf.js:

'use strict';

const HttpsProxyAgent = require('https-proxy-agent');

const proxyConfig = [
  {
    context: '/api',
    pathRewrite: {'^/api': ''},
    target: 'http://api.icndb.com',
    changeOrigin: true
  }
];

function setupForCorporateProxy(proxyConfig) {
  if (!Array.isArray(proxyConfig)) {
    proxyConfig = [proxyConfig];
  }

  const proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
  let agent = null;

  if (proxyServer) {
    agent = new HttpsProxyAgent(proxyServer);
    console.log(`Using corporate proxy server: ${proxyServer}`);
    proxyConfig.forEach(entry => { entry.agent = agent; });
  }

  return proxyConfig;
}

module.exports = setupForCorporateProxy(proxyConfig);

So far so good, everything works as expected :)

Maybe this example could be added to the documentation? Working behind a corporate proxy is really a pain in the a** to configure...

[mmrath]

@sinedied Any chance you could raise a PR to update docs?

[sinedied]

@mmrath sure, I'll do it as soon as I have some free time

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}