2 Ways to Fix CORS Issues in Angular

When you are using a backend server for your Angular app during development, when you try to request resources from your API, you may come across some CORS restrictions that prevent you from accessing data from your API. In this tutorial, we will take a quick look at how this can easily be solved with two different solutions.

But first, to better solve the issue, we need to better understand the problem first. First of all, what is CORS anyway? Don’t care about the problem? Jump to the How to fix section.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

What is CORS?

Cross-Origin Resource Sharing — or CORS for short — is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one domain have permission to access selected resources from a server at a different domain.

For example, if your application is hosted on https://domain-a.com and you make a fetch request to https://api.domain-b.com/data.json, then you might run into CORS errors if the server doesn’t allow cross-origin resource sharing because you request resources from domain-b on domain-a.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request HTTP resources from the same origin the application was loaded from unless the response from the other origin includes the right CORS headers.

When it comes to fixing CORS issues in an Angular app, we can go about the problem in two different ways:

We can get around CORS issues using proxies provided by Webpack. First things first, open up your Angular project and create a new file in your src directory called proxy.conf.json, with the following contents:

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

This will tell your dev server to proxy any requests made to the /api endpoint and forward them to localhost:3000. This file is essentially using the configuration of Webpack’s devServer.proxy. You can find the list of available options on their official documentation.

Next, you need to make Angular aware of your proxy configuration, by pointing Angular to this file through your angular.json, using a proxyConfig key:

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

Finally, with the configurations in place, now you should be able to serve your app without having CORS issues. If you need to make changes to the proxy configuration, make sure you restart your dev environment after doing so.

ng serve

CORS issues can also be fixed by sending the right HTTP headers from the server. Most languages and frameworks already provide an existing package or API to configure the right headers in an easy way. For example, if you are using Express, you can use the cors package to get rid of CORS errors:

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

If you would like to learn more about how to build scalable APIs in Express, make sure to check out the tutorial below. Thank you for reading through, happy coding! 👨‍💻

How to Use Express to Build a REST APIAn introduction to building scalable APIs in NodeDo you want to learn more about the world of rest APIs? Learn how you can create your first API with Express in Node, using only JavaScript.Learn More