How to add proxy config in Angular?

If you are receiving the requirement to develop the angular application and it should be interacting with the external micro service for updating and pulling the user data. In this case your angular application will be running on one server, And micro service will be running on another one server. When you try to access the back-end micro service from angular application, that micro service will not allow for accessing it. It will be returned the CORS error response. To avoid this you can add proxy config. This proxy config will help you to access the external micro service successfully from your angular application.

this post really helps you to add proxy config in your angular application

First, you have to create proxy.config.json file inside the src folder as below. And then you have to add this file path as given in this example in angular.json. Then you have to restart the server, then only this change reflected.

Proxy Config File Path
Proxy Config File Path

proxy.config.json

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

angular.json

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

Conclusion

If you are here I believe now you have some idea about what is proxy config, why we need to add it and where we need to add it.