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)

Answer 1

I think that happens because you missed the changeOrigin attribute.

Note: proxy.config.json files only work in your local environment, these are configurations for the angular-cli server.

I made different proxy.config.json files for local and production (when locally I make a request from the browser, it will be redirected to production). I use pathRewrite to rewrite the requested url, so if I request http://localhost:4200/client-api/stores it will redirect 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 the angular.json file I use the proxy config files inside the serving configurations.

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.

Answer 2

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": ""}
    }
  }

Answer 3

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
  }
}

Answer 4

Sometimes we want to use the Ng production deployment file and don't want the Ng server to run, so we only need to use the Angular output(dist).

The proxy options on our web server can be set up to act as a proxy server when we have a local development environment. Nginx needs to be added to the Dockerfile and a proxy options file was added to the Dockerfile. Dockerfile uses a simple copy command to set up a proxy.

production.nginx.proxy.conf

server {   listen 80;   listen [::]:80;   server_name localhost;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm; 
    try_files $uri $uri/ /index.html =404;
}

  location /identity {
    proxy_pass http://yourapi.com; }

  location /someroute{
    proxy_pass http://yourapi.com:5021; } 
}

Dockerfile

FROM node:18-alpine as build
WORKDIR /usr/local/app
COPY ./ /usr/local/app/
COPY package*.json ./
RUN npm install -g npm@latest
RUN npm install --force
RUN npm run build --prod

FROM nginx:1.21.6
# ---- We set our proxy configuration in the following line ----
COPY production.nginx.proxy.conf /etc/nginx/conf.d/default.conf
COPY --from=build /usr/local/app/dist/your-project-name /usr/share/nginx/html

EXPOSE 80