Handle CORS issue in Angular 8 and Node/Express Applications

In this tutorial, we will learn to handle CORS (Cross-Origin Resource Sharing) issue in Angular 8/9 and Node/Express Applications. To solve CROS related issues in Angular, we will manage proxy configuration settings.

To sort out CORS related problems in Node/Express Applications, we will be using a third-party plugin called cors and some backend settings.

Table of Contents

1. Introduction to CORS
2. Fixing CORS Issue in Angular 8/9
3. Enable CORS in Node/Express Server
4. Conclusion

Introduction to CORS

Cross-origin resource sharing (CORS) is a standard that manages communication between 2 or multiple domains.

CORS is a mechanism for accessing data on various domains, that data type could be images, stylesheets, js scripts, iframes, and videos. This mechanism is used for sharing restricted resources on a web page asked from a different domain.

Fixing CORS Issue in Angular 8/9

Angular server by default serves on localhost:4200 (PORT 4200) and suppose if your backend server is working on different port or domain, then the CORS issue will inevitably occur.

Enable CORS with Proxy Configuration Settings in Angular.

Now, we are setting proxy in backend. Let’s say we have a backend server working on http://localhost:3000/api and we want to pass all the API calls to http://localhost:4200/api backend server.

To enable CORS via proxy configuration, we need to generate a src/proxy.conf.json file inside the Angular root folder and also place the following code inside of it.

We used the secure property to enable the deliberate use of SSL.

We defined logLevel property, to verify whether or not our proxy is running correctly.

In order to explore more about proxy configuration please refer to proxy to backend article.

{
    "/api/*": {
        "target": "http://localhost:3000",
        "secure": false,
        "logLevel": "debug"
    }
}

Define Proxy Configuration values in angular.json

To register a proxy configuration, we need to go to the angular.json file and place the following code inside the serve/options. It will set the src/proxy.conf.json file in our Angular app.

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

Now, you are all set to start dev server with current proxy configuration, run the given below command. Please restart the server if you make any update in your proxy conf file.

ng serve --open

Enable CORS in Node/Express Server

Now, we will learn how to enable CORS in the Express and Node js app. We will look at one of the most straightforward methods to configure CORS in the express by using a third-party package.

You can run the following command to add the cors package in node/express backend.

npm install cors --save

Next, you can add the below code to enable cors in Express server.

// server.js

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

/* server configuration here */

Finally, CORS is enabled in the node server.

The Access-Control-Allow-Origin: * header will be rendered when any request is made to your application. This header chooses which origin are authorized to access the server resources with CORS.

Here * wildcard allots access from any source.

Conclusion

Finally, we have completed how to solve the CORS issue in Angular 8/9 and Express/Node server. To enable CORS in Angular, we learned how to configure Proxy Configuration. Other than that, we also learned how to install and configure CORS configuration in the Node server using a third-party plugin.

#angular #node #express