How to Setting Up Proxy Configuration in Angular 14

How to Setting Up Proxy Configuration in Angular 14

In this tutorial, we will learn about How to Setting Up Proxy Configuration in Angular 12,13, or 14 versions.

What is a Proxy?

  Basically, Proxy configuration is a way of diverting specific URLs to a backend server.  

Also read, 5 Reasons Angular Is The Next Big Thing In Web Development

Set up Proxy Configuration in Angular step by step:

Step 1: Create a proxy config file

Create a new src/proxy.conf.json file and add the following configurations:

  "/api": {
    "target": "http://localhost:3000",
    "secure": false

Other proxy.config.json options:

target: Here is where the backend URL needs to be specified.

pathRewrite: This option is used to change or rewrite the path.

changeOrigin: We should set this value to true if your backend API is not accessible via localhost.

logLevel: If you want to make sure the proxy configuration is functioning properly use this.

Step 2: Update CLI configuration

 Go to angular.json and place the proxyConfig property to point towards the serve target as below:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "angular-application-name:build",
      "proxyConfig": "src/proxy.conf.json"

Now You can test the dev server through the proxy configuration  which we have added in our angular application using the ng serve command

Subscribe to our Newsletter

Stay up to date! Get all the latest posts delivered straight to your inbox.

If You Appreciate What We Do Here On TutsCoder, You Should Consider:

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

Comments (1)

Leave a Comment