Sometimes, we want to proxy API requests to another server with angular-cli server.

In this article, we’ll look at how to proxy API requests to another server with angular-cli server.

How to proxy API requests to another server with angular-cli server?

To proxy API requests to another server with angular-cli server, we can create a proxy.config.json file with a few settings.

For instance, we write

{
  "/api": {
    "target": "http://api.foo.com",
    "secure": false
  }
}

to proxy the /api URL to http://api.foo.com in proxy.config.json.

Then in angular.json, we add

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

to add the architect property with the proxy.conf.json that we added set as the value of proxyConfig.

Then we can run ng server as usual to use the proxy config.

Conclusion

To proxy API requests to another server with angular-cli server, we can create a proxy.config.json file with a few settings.