Angular CLI Proxy Settings for API Calls

Angular CLI provides a proxy settings for API calls to help developers to avoid those annoying cross domain issues during development process.

Most angular developers use CLI to setup their local environment, it means that your application will be running on localhost and using the port 4200 (whatever port you set up).

You might probably have to call API’s which are pointing to different environment or port, unless if you’re not developing a serverless application.

API Calls Cross Domain Issue

Running your Angular application you will see straightway the message below. In this case I’m trying to access my localhost API that is running on port 8080, but my application is actually running on port 4200.

Access to XMLHttpRequest at ‘your api’ from origin ‘your local environment’ has been blocked by CORS policy. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the request resource.

Painful Solutions

Then that’s the time when you start arguing to backend developers to open the API’s endpoints, then reset access control allow origin to accept access from your port and implement CORS, or even write a node service to deal with all proxy stuff.

But even after that you still have to add environment variables, during your HTTP request to hit the full API url you have to concat this host variable.

export const environment = {
  production: false,
  api: 'http://localhost:8080/'
}

However, most developers have no idea that Angular CLI provides a handy settings. This configuration makes all frontend developers life easier during the development stage, you can cut all those steps mentioned above writing just a few lines of code.

Create Proxy Settings File

Firstly, you should add a file in the root level of your project (same level as angular.json). Angular CLI provides proxy settings to deal with API to avoid cross domain issues when your application calls API’s.

You can name it as whatever you want, but I strongly recommend to name this file as proxy.conf.json to easily remind you what it is about.

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

• api/*

All requests made to your application/api is forwarded to whatever you defined as your target. Api is just a name that I picked, but you’re free to add whatever you feel like, that’s pretty much the route that will differentiate client route from backend endpoints.

• target

Your backend endpoint url.
All the time you try to access your url / api it will redirect to the correct API.

• secure

Set it as true if the backend server is running on HTTPS with an invalid certificate will not be accepted by default. If you want to, you need to set secure: false.

• logLevel

To help debug whether or not your proxy is working properly, you can also add the logLevel option as follows. Possible options for logLevel include debug, info, warn, error, and silent (default is info).

• pathRewrite

If the path matches /api, then rewrite that portion with the empty string (i.e. remove it from the path).
All the request to https://localhost:4200/api will go to https://localhost:8080

• changeOrigin

If you need to access a backend that is not on localhost or when you’re using some virtual proxies.

After this settings you will be able to invoke all API’s using your angular project hosted url.

To get all users form api, now you can just call:
http://localhost:4200/api/users

Angular CLI Proxy Settings

After you create the proxy settings file you should add the reference to this proxy settings inside your angular.json file.

Find the block serve inside the angular.json file, then add the line proxyConfig with the file name that you just created above.

"serve": {
   "builder": "@angular-devkit/build-angular:dev-server",
   "options": {
      "browserTarget": "unboxing:build",
      "proxyConfig": "proxy.conf.json"
    }
 }

Remember to restart your application all the time you change any config file.

Conclusion

Keep in mind that Angular CLI uses this setting during development stage only, it means that the proxy configuration works when running the dev server via ng serve, after you run ng build you are responsible for the web server and its configurations.

This process is helpful to avoid backend headaches during the development stage.