How 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.

JavaScript Course

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.

Remove ads

Why CORS happens?

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.


How to Fix CORS Issues?

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

Using Angular CLI proxy

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
    }
}
src/proxy.conf.json
Copied to clipboard!

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"
       }
    }
}
angular.json
Copied to clipboard!

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

Using the right headers

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());
Copied to clipboard!

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 API
Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.