JIYIK CN >

When we use a backend server for our Angular application during development, when trying to request resources from the API, we may encounter some cross-origin (CORS) restrictions that prevent us from accessing data from the API.

In this article, we will quickly see how to easily solve this problem using two different solutions.

But first, to better solve the problem, we need to understand the problem better. First, what is CORS? If you don't care about this issue, jump to the How to fix it section.

What is cross-domain CORS

Cross-Origin Resource Sharing, or CORS for short, is a mechanism that uses additional HTTP headers to tell browsers to allow a web application running in one domain to access selected resources from a server in a different domain.

For example, if the application is hosted on https://domain-a.comand we https://api.domain-b.com/data.jsonmake a fetch request to , if the server does not allow cross-origin resource sharing, we may encounter a CORS error because we are requesting a resource from domain -ato domain -b.

Why does cross-domain happen?

For security reasons, browsers restrict cross-domain HTTP requests initiated from scripts. For example, XMLHttpRequest and Fetch APIs follow the same-origin policy. This means that web applications using these APIs can only request HTTP resources from the same origin that loaded the application, unless the response from the other origin contains the correct CORS headers.

How to fix cross-domain issues

When it comes to solving CORS issues in Angular applications, we can solve the problem in two different ways:

Using the Angular CLI Proxy

We can solve the CORS problem by using the proxy provided by Webpack. First, open the Angular project and create a new file called proxy.conf.json in the src directory with the following content:

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

This will tell our development server proxy to forward any requests made to the /api endpoint to localhost:3000. This file is essentially the configuration for devServer.proxy using Webpack .

Next, we need to make Angular aware of our proxy configuration by pointing it to this file via angular.json using the 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 configuration in place, we should now be able to serve the application without CORS issues. If you need to change your proxy configuration, make sure to restart your development environment after doing so.

$ ng serve

Use the correct headers

CORS issues can also be resolved by sending the correct HTTP headers from the server. Most languages ​​and frameworks already provide existing packages or APIs to configure the correct headers in an easy way. For example, if you use Express, you can use the cors package to resolve CORS errors:

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

This can easily solve the problem of cross-domain resource sharing.

Recommended reading:

• Ajax cross-domain cookie related settings
• PHP+ajax to achieve cross-domain single sign-on