Reverse Proxy angular cli to another port

0
votes

I want to proxy a specific url to another server. I followed the instructions here https://github.com/angular/angular-cli#proxy-to-backend

So to test things out I started to angular 2 application, one on port 4200 and one on 4201.

My proxy.config.json :

{
  "/auth": {
    "target": "http://localhost:4201",
    "secure": false
  }
}

Result:

  • If I stop the server running on 4201 I get an error.

Error occured while trying to proxy to: localhost:4200/auth

  • If the server is running I still get the page from localhost:4200

What I expect:

  • having the page from 4201 returned.
1
angularproxywebpackwebpack-dev-serverangular-cli

1 Answers

3
votes

Update: I'm still getting upvotes for this answer although I changed my method. To reverse proxy I just add a proxy.config.json at the root of an angular project made with angular-cli

{
    "/api/*": {
        "target": "http://stoemelings.showsourcing.com/",
        "secure": "true",
        "logLevel": "debug"
    }
}

more info

Old answer

I ended up using nginx as a reverse proxy. It's quite simple actually.

  1. Download nginx.
  2. Unzip it.
  3. Make the nginx.conf as such:

nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;


server {
        listen       8081;
        server_name  localhost;
        location / {
            proxy_pass http://127.0.0.1:4200/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
        location /auth {
            proxy_pass http://127.0.0.1:8080/auth;

        }
}
}

watchout for the {}, there might not be the right count.

  1. start nginx in command prompt at nginx location.