Solving CORS Error in Angular 12 with Angular CLI Proxy

This tutorial walks you through how to solve CORS (Cross-Origin Resource Sharing) errors in Angular 12 applications using Angular CLI proxy configuration.

CORS is a resource sharing mechanism which stands for Cross-Origin Resource Sharing. Its a simple HTTP Headers, which lets restricted resources to be accessed from the outer domain, located elsewhere.

How to Solve CORS Error in Angular 12?

Do you want to know why CORS issues occur in Angular 12 or maybe in some other JavaScript frameworks.

Well, Angular server runs on localhost:4200 and if you make requests from localhost:8000 it becomes outer server and will throw the CORS error.

Fix Angular CORS Issues

CORS invokes the consensus with cross-origin requests. A cross-origin resource could be images, stylesheets, scripts, iframes, and videos.

Many of us must have met with CORS issues in Angular. It happens because browser security doesn’t allow you to make cross-domain requests. This condition becomes void if your HTTP Header has a Control-Allow-Origin header with * value or even if it is a domain of the same client.

Solve CORS with Angular Proxy Configuration

No matter which modern JavaScript framework you are using, it may manifest in any frontend JS framework. Be it React, Vue.js, or Core JavaScript. However, we are going to focus on solving Angular CORS errors.

First, create a proxy.conf.json file and incorporate the following code inside of it.

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

In the above file, we have defined that the HTTP request that begins with /app/ path will be redirected to the proxy that points towards the hostname.

It will spruce up the security especially If you forcefully use the SSL. For better use, you may also check the webpack’s official docs.

In this step, we include the proxyConfig key:value inside the architect/serve/option with the src/proxy.conf.json path. Open the angular.json file and add the given below code.

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

Setting UP CORS in Node and Express

CORS issue can be solved by using third-party packages or modules. For instance, if you are developing an app with Node/Express, you can use the CORS Library to sustain the full-stack development’s impetus.

Install the CORS package through NPM (Node Package Manage) or Yarn.

npm install cors --save

The last imperative which needs to be given precedence for enabling CORS in node/express based apps.

// server.js

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

app.use(cors());

Fixing CORS Error in PHP

If you are working on a PHP project and thAn you need to enable the CORS, you can do it with a simple line propel the below single line of PHP code to fix the CORS issue in PHP.

header('Access-Control-Allow-Origin: *');