angular proxy configuration for development and production

Question

when I import HttpClient to call my own written node.js API, there are some issues with the settings of the URL.

for example:

import { HttpClient, HttpHeaders } from '@angular/common/http';

export class myComponent implements OnInit {

    constructor(
    private http: HttpClient,
    ) {}

    ngOnInit(): void {
       this.http.get('http://127.0.0.1:3000/getData/theme').subscribe(data => {

       });
    });
}

//angular default port 4200,
//node.js default port 3000,

when I set this.http.get('/getData/theme') the get will be call http://127.0.0.1:4200, this is wrong. if I set this.http.get('http://127.0.0.1:3000/getData/theme') for local development it works. but, when ng build setting to actual server, it can't connect properly.

the console:

GET http://127.0.0.1:3000/getData/theme 
net::ERR_CONNECTION_REFUSED

GET http://localhost:3000/structureData/themeData 
net::ERR_CONNECTION_REFUSED

How can I set the correct URL to allow it to meet both online and local development status?

angular-cli server - how to proxy API requests to another server?

I set the package.json:

"start": "ng serve --proxy-config proxy.conf.json"

and

proxy.conf.json
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

it's not working:

this.http.get('/getData/theme')

GET http://localhost:4200/getData/theme 404 (Not Found)

or

this.http.get('/api/getData/theme')

GET http://localhost:4200/api/getData/theme 404 (Not Found)

Possible duplicate of [angular-cli server - how to proxy API requests to another server?](https://stackoverflow.com/questions/37172928/angular-cli-server-how-to-proxy-api-requests-to-another-server) — Igor, Mar 12 '18 at 16:15
See the proposed duplicate question. If you are using the cli you can use the proxy configuration which will route to the host (*server and port can be configured*) of your choice. — Igor, Mar 12 '18 at 16:15
@Igor The proxy configuration is intended to proxy calls when running the dev server via ng serve. After you run ng build you are responsible for the web server and its configurations. — Vikas, Mar 12 '18 at 16:23
`"/api"` is a pattern. Any URL starting with `/api` is routed through the proxy. `/getData` does not start with `/api`. If you wanted to make a catch all you could use an empty string. — Igor, Mar 12 '18 at 17:24
I tried two ways to add /api or not, routers do not lead to the correct location (3000) — Finn, Mar 13 '18 at 01:49
This whole "proxy file" thing is complete BS and IMO shows how Angular is slowly sliding itself right into the garbage can... — Jim, Nov 02 '21 at 16:04

score 20 · Answer 1 · answered Mar 09 '20 at 13:14

I think that happens because you missed the `changeOrigin' attribute.

I have different proxy.config.json files for local and production and it's working. I leave here an example.

Note: I use pathRewrite to remove that string from the url. So if I request http://localhost:4200/client-api/stores it redirects to https://www.your-web.com/api/stores

proxy-prod.config.json

"/client-api/*": {
    "target": "https://www.your-web.com/api",
    "pathRewrite": { "^/client-api": "" },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }

proxy-local.config.json

"/client-api/*": {
    "target": "http://localhost:22222",
    "pathRewrite": { "^/client-api": "" },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }

In angular.json use the proxy config files. You can do it in package.json too, but I prefer this way.

angular.json

...
       "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "proxyConfig": "src/proxy-local.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production",
              "proxyConfig": "src/proxy-prod.conf.json"
            },
          }
        },
...

If you run ng serve, the application will use the local proxy. Use ng serve --prod for production.

Thanks @adrisons, how do you build this for a production deployment? In the case when I have CORS in my ajax(GET) call how do I substitute the url? How do I pass parameters in proxy.config.json file? — David Sagang, Sep 23 '20 at 19:05
Hello @DavidSagang, this proxy.config.json only works in development because angular server uses it. CORS errors happen when in the browser you receive data from a different url than the one your app is served. The easier way to fix CORS errors is to make the HTTP call from your server, and make your web app request it from your server. — adrisons, Sep 24 '20 at 07:10

score 11 · Answer 2 · answered Jul 24 '19 at 14:09

I had the same problem... To serve my front into production I use Nginx. If you have the same scenario, you can do this:

location /api {
       rewrite /api/(.*) /$1  break;
       proxy_pass http://exempleApi.com
}

This equals in your proxy.config.json that you use in the development:

  {
    "/api/*": {
      "target": "http://exempleApi.com",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": "true",
      "pathRewrite": {"^/api": ""}
    }
  }

score 2 · Answer 3 · edited Jan 26 '20 at 22:37

2

I use this proxy.conf.json

 {
    "/Api/Workflow/Preview/*": {
        "target": "https://subdomain.domain.com/",
        "protocol": "https:",
        "secure": false,
        "changeOrigin": true
    }
}

i belive that you must to write this proxy.conf.json:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

edited Jan 26 '20 at 22:37

Dharman

26,923
21
73
125

answered Dec 18 '18 at 11:36

Luiggi

358
3
12

angular proxy configuration for development and production

3 Answers3

proxy-prod.config.json

proxy-local.config.json

angular.json