1

I am trying to setup a backend proxy so that all requests done on the client-app running on port 4200 get rewritten to port 80.

When I run the request:

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

It should be hitting localhost:80/translate?language="en" but it's instead hitting localhost:4200/translate?language="en".

I tried setting it up through angular.json adding proxy.conf.json:

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

looking like this:

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

But this does not work. I've read it's done a little different in angular 7 and you pass the proxy with ng serve like so:

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

with the proxy.js file being:

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);

But that also doesn't seem to work and the request keeps going against localhost:4200.

The app is running inside a docker container if that matters.

Idea ideas?

qubits
  • 1,227
  • 3
  • 20
  • 50

1 Answers1

1

The context part in your proxy config configures which routes are effected by the proxy, so the proxy doesn't intervene with the actual routes from your angular app.

Your proxy config states, that everything starting with /api will be redirected to port 80. So if your translate request would be /api/translate then your proxy would take effect.

Erbsenkoenig
  • 1,584
  • 14
  • 18
  • Thank you, you are correct. I didn't notice I am missing an api/ in the request url. – qubits Apr 11 '19 at 20:05
  • I just checked and seems like it doesn't work after all and still writes localhost:4200 ;) Regardless I still think the /api should be there so thanks – qubits Apr 11 '19 at 20:12
  • 1
    mmh i'll have a look at my config again whether we have configured something else. but we don't have a docker container. so maybe there is something more missing for that to work inside the docker container. but i'll check nevertheless. did you start using proxy.js or the proxy.conf.json? we used the json config in our project. i haven't used the https-proxy-agent before – Erbsenkoenig Apr 11 '19 at 20:15
  • I have both loaded up in the configuration at the moment and did everything according to the instructions in the documentation. – qubits Apr 11 '19 at 20:17
  • 1
    Just checking again: so our proxy.conf.json is like yours, but we only have a start script `ng serve ... --proxy-config proxy.conf.json`. Do you need this https-proxy-agent for your docker container? if not maybe try without this proxy.js script. we only have the proxy.conf.json referenced inside the start script and nowhere else and it works for alle the /api calls. – Erbsenkoenig Apr 11 '19 at 20:21
  • Just checked, sadly it didn't help. The angular.json configuration definition should already be doing just that. Adding that parameter to every ng serve but the proxy still doesn't seem to be applied – qubits Apr 11 '19 at 20:29
  • 1
    yes if it's inside the angular.json you wouldn't need it as a param inside the start script. and your docker-start script didn't overwrite the proxy config with the proxy.js as a parameter anymore? mmh maybe it has got something to do with running it inside a docker container but i can't really see why that should be. i'll see whether i can find a bit more information. – Erbsenkoenig Apr 11 '19 at 20:32
  • 1
    does this help: https://stackoverflow.com/questions/46078460/angular-cli-proxy-not-working-inside-docker ? – Erbsenkoenig Apr 11 '19 at 20:36
  • I thought so, checked it out, I tried both with changeOrigin: true, false as well as providing the retarget url as the name of the container as well as with plain localhost. Keeps hitting localhost:4200 – qubits Apr 11 '19 at 20:44
  • Yeah, so I figured what was wrong. My proxy-conf.json was missing the initial brackets { } , plus the /api url and the link to the docker container. Works fine now. – qubits Apr 12 '19 at 08:30