What is CORS error?

Let us say you are on a website https://my-own-domain.com or in other words, it is the origin of the website. From this website, if you try to access a resource from some other origin such as https://some-another-domain.com, the browser blocks the request and shows an error in the console.

Why does the browser block a cross-origin request?

The error is part of a mechanism that browsers implement known as the same-origin-policy.

For every http request to a domain, the browser attaches the cookies (if any) associated with that domain. Generally, applications use this feature to identify logged-in users by keeping a session cookie.

For example, you may login to an application example-application.com and the domain saves a session cookie. This is useful since you don’t need to login again and the domain can identify you. Now imagine a scenario where you clicked a tricky ad and it opened another domain, malware-application.com. This new domain can make a request to example-application.com from your browser, and your session cookies will be automatically attached to the request. example-application.com will identify the cookie and allow the malware-application to access the resource. This is known as a cross-site request forgery attack.

To avoid such a scenario, the browser follows the same-origin policy and will block the malware-application from making the request.

But what if you need to make a genuine cross-origin request? Below are some methods to bypass the same-origin policy.

1. Allow CORS in the server

Consider a scenario where you have two different domains my-application.com and my-apis.com. You need to call an API in my-apis.com from my-application.com. The browser will block the request due to same-origin policy.

To bypass this, you can allow cross-origin requests on my-apis.com.

This access can be selectively provided to some domains or use a wildcard to allow requests from any domain. You can restrict the method of requests such as GET/POST etc.

Below is an example code for allowing cross-origin-request-sharing(CORS) written in express based server:

// Add headers
app.use(function (req, res, next) {    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'https://my-application.com');    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);    // Pass to next layer of middleware
    next();
});

2. Use a proxy

Cross-origin request blocking is a security mechanism implemented by the browsers. This means these requests can be made from a server.

2.1 Create a middleware

In the example explained before, you can have a middleware API in the server rendering my-application.com. Instead of calling the resource in my-apis.com directly from the browser, make a call to the middleware API in my-application.com and let the middleware API make the request to my-apis.com.

2.2 Let your web-server do the job

You can use your web-server (Nginx, Apache, etc.) to act as middleware and proxy pass the requests.

For example, adding a new route in Nginx and proxy passing the requests on that route to my-apis.com allows my-application.com to make a call to the specified route.

location /api {
proxy_pass https://my-apis.com/;
}

Conclusion

CORS error can be avoided either by allowing the resource to be accessed by other domains or by using a proxy middleware.

Understanding the CORS error and the solutions help us to understand better how the web systems work.