How to Enable CORS in Angular 14

Enable cors in angular 14; In this tutorial, we will learn to handle CORS (Cross-Origin Resource Sharing) issues in Angular 12/13/14 Applications and solve CROS related issues in Angular apps.

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

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. So, we need to setting proxy in backend in angular apps.

How to Fixing CORS Issue in Angular 14

Just follow the following steps to enable cors or fix cors (Cross-Origin Resource Sharing) issue in angular 12/13/14 apps:

Step 1 – Create proxy.conf.json File
Step 2 – Add Proxy Configuration values in angular.json

Step 1 – Create proxy.conf.json File

First of all, create a proxy.conf.json file and add the following code into it; is as follows:

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

Step 2 – Add Proxy Configuration values in angular.json

To register a proxy configuration, we need to go to the angular.json file and update 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, we are all set to start the development server with the current proxy configuration, So, execute the following command on command line:

ng serve --open

Conclusion

In this tutorial, we have learned to handle CORS (Cross-Origin Resource Sharing) issues in Angular 12/13/14 Applications and solve CROS-related issues in Angular apps.