Tutorial — How to use a proxy to prevent CORS issues with Angular? | by Alain Chautard

If you’ve ever encountered CORS errors in your Angular apps, this tutorial is for you!

CORS stands for Cross-Origin Resource Sharing. It’s a security mechanism that allows web browsers to make controlled requests to resources on a domain different from the one serving the web page.

This means if you’re serving your app on a domain “example.com” or “localhost” and your web app makes requests to “google.com” or some other domain, the web browser will make a preflight request (HTTP OPTIONS) to that other domain to ask if “example.com” or “localhost” are allowed to request data.

A typical preflight response looks like this and is visible in the browser’s dev tools network tab:

HTTP/1.1 204 No Content
Connection: keep-alive
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Allow-Headers: X-Requested-With, Content-Type
Access-Control-Max-Age: 86400

Web browsers make this CORS check, but if you’re using node fetch or Postman or anything else, the request will most likely work, which can be puzzling. Now you know the reason why: Only browsers enforce CORS policies.

By using a Node.js proxy! The proxy will intercept your HTTP request and turn it into a new HTTP request to the third-party domain. Since the origin of the request will be the Node.js proxy, not your web browser, CORS policies won’t be enforced.

Angular has built-in support for that proxy. Here is how to use it:

1. Create a file proxy.conf.json in your project’s src/ folder.
2. Assuming you want to proxy your requests from localhost:4200/api to http://third-party-example.com, add the following content to proxy.conf.json

{
"/api": {
"target": "http://third-party-example.com",
"secure": false
}
}

3. In the CLI configuration file, angular.json, add the proxyConfig option to the serve target:

{
"projects": {
"my-app": {
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"proxyConfig": "src/proxy.conf.json"
}
}
}
}
}
}

That’s it! The next time you run ng serve, Angular will proxy your localhost:4200/api requests to http://third-party-example.com

Note that the config file supports multiple entries, so you can use the same proxying approach for multiple servers and APIs.

In production, you have two options:

• Ensure the third-party server/API has allowed your domain from a CORS perspective (this is usually done by signing up for an API key for your prod domain)
• Have your backend server act as that proxy. Instead of sending your request to http://third-party-example.com, you send it to a specific endpoint on your server that will forward it to its actual destination.

Now, you know almost everything about CORS and how to work with such policies.

My name is Alain Chautard. I am a Google Developer Expert in Angular and a consultant and trainer at Angular Training, where I help web development teams learn and become comfortable with Angular.

If you need any help with web development, feel free to get in touch!

If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to my articles and my Daily Angular Newsletter to receive helpful daily tips.