How to Handle CORS in Angular 2 and Node/Express Applications
Allow other domains to access back-end resources
In many applications, the front end and the back end reside at a single point — i.e. there might be many Node.js applications which serve the front end using Express.js with JADE/Handlebars or other frameworks. Sometimes, however, you might want to host your front end somewhere else to isolate your back end. Or, you might want to allow multiple domains to access your Node.js back end. In such cases you have to enable CORS.
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the resource originated.
Long story short, CORS allows other domains to access the back-end resources you want to expose as well as the API/REST calls.
For Angular 2 applications, there are multiple starter templates available to choose from. Then there’s angular-cli for Angular 2 apps, which is being used by many even though it is still currently in its beta. These templates allow you to have your standalone server for Angular apps. So, when you’re building your Angular 2 and Node.js apps, your front end and back end will be on different domains, and, while in development, probably on different ports. For example http://localhost:4200 could be your Angular 2 app’s address, and http://localhost:3000 might be your Node.js API server.
By now you might be thinking, “Oh come on Ahsan, I know all that! Just tell me how to do the CORS stuff.”
Here we go!
On the Node.js end, it’s pretty simple. There’s this awesome CORS npm package for Express.js that serves as a middleware. So, install the package in your project using npm :
cd /path-to-your-project
npm install cors --saveThen, in your main Node.js file, usually app.js, require the module, and use the following configuration:
The above code will enable CORS on your Node.js and Express.js application.
Now you need to prepare your Angular app to work for CORS. As of now, there isn’t an official way to do this. There is a pull request on the Angular 2 github repository, but I don’t think it has been merged yet.
So here’s the deal. To enable CORS, you can extend the BrowserXhr class (considering you’re working on Typescript for Angular 2) and include that in the bootstrapping process. Create a file in your Angular 2 project named cust-ext-browser-xhr.ts and paste the following code:
Now, in your main file where you bootstrap your app component, import our custom browser xhr module and use it in the bootstrap process:
Note: the below code is for Angular 2. For Angular 4+, scroll down further.
For Angular 4+, use the following snippet:
That’s it! That’s all we need to make CORS work in our Angular 2 and Node.js/Express.js applications. I use Passport.js for authentication in my Node.js applications, which is an extremely flexible and easy to use framework.
Happy coding! :)
