如何在服务器产品上配置 Angular 代理？

Question

I am testing a new aproach in my front end App build with Angular, and i want to hide the API url from the browser Network. form example: to call login on api.url.dz/login i want to call front.url.dz/login on the front then redirecte this to api.url.dz/login. here is my proxy.config.json file:

{
    "http://localhost:4200":{
        "target":"http://localhost:9999/",
        "secure":false,
        "changeOrigin": true,
        "logLevel":"debug",
        "pathRewrite": {"^/authenticate": "authenticate",
                        "^/authenticate-refresh": "authenticate-refresh",
                        "^/refresh-token": "refresh-token",
                        "^/auth-logout": "auth-logout"
                    }
                    }
}

this works on localhost because i start project with this command:

ng serve --proxy-config proxy.config.json

but in production server when executing:

ng build

it doesn't work
this is the config in prod server:

{
    "https://front.domaine.dz":{
        "target":"https://back.domaine.dz:9999",
        "secure":false,
        "changeOrigin": true,
        "logLevel":"debug",
        "pathRewrite": {"^/authenticate": "authenticate",
                        "^/authenticate-refresh": "authenticate-refresh",
                        "^/refresh-token": "refresh-token",
                        "^/auth-logout": "auth-logout"
                    }
                    }
}

i want to know if there is an alternative to execute with proxy option in ng build command?

angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "argon-dashboard-angular": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss",
              "src/assets/scss/argon.scss"
            ],
            "scripts": [
              "node_modules/chart.js/dist/Chart.min.js",
              "node_modules/clipboard/dist/clipboard.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "argon-dashboard-angular:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "argon-dashboard-angular:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "argon-dashboard-angular:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "argon-dashboard-angular-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "argon-dashboard-angular:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "argon-dashboard-angular:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "argon-dashboard-angular",
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  },
  "cli": {
    "analytics": false
  }
}

Answer 1

Angular proxy is not meant to be used in production.

You can circumvent this by running ng serve with your proxy configuration in production but that's bad practice.

You have to configure your web server (apache/nginx/other) to proxy requests according to your proxy.config.json (as in, use the relevant directives to get the same behavior as your proxy.config.json ).

For instance, you can use ProxyPass and ProxyPassReverse with Apache.