We all have encountered CORS errors in web-app development, in this article, we will understand what are these errors, what causes these errors in the first place, and how to fix these errors.
Before fixing the issue, in order to understand CORS Errors, we first need to understand what are origin and cross-origin. ORIGIN is nothing but the website identifier you are visiting currently. Origin is schema i.e. HTTP/HTTPS plus hostname. Cross-Origins Requests are requests originating from an origin to a different origin.
CORS stands for Cross-Origin Resource Sharing, which are standards by which cross-origin requests are governed. Let's take an example to understand why CORS error occurs? Say, a website
apples.com makes a request to
oranges.com, this will result in a CORS error, as the browser knows that the current origin is
https://apples.com and there should not be requests made to
oranges.com in normal conditions. In such a situation, the browser makes a pre-flight call which is an OPTIONS call.
Please note that it is the browser that is detecting cross-origin requests and makes a preflight request first. So very old versions of chrome, internet explorer, or firefox may not even care about the cross-origin requests and may fire the request straight away. As a matter of fact, CORS can be disabled from the modern browser also, there are extensions to do so. However, this is not recommended as CORS is a security feature.
CORS is actually a feature, not a bug.
Let's continue what happens after the browser makes the pre-flight request call.
organges.com server receives the request from a different origin and now it has to decide if it wants to allow traffic from
apples.com or not. If
oragnes.com decides not to serve the request, we get a CORS error. Now, in order to handle the pre-flight request, special headers are set by the receiver server in the response. Let's take a look at those special headers.
- Access-Control-Allow-Origin: This response header indicates whether the response can be shared with requesting code from the given origin. In our example, if
oranges.comwants to support calls from apples.com, it can send this header as
Access-Control-Allow-Origin: https://apples.com. This is normally set as a regex to support sub-domains as well.
- Access-Control-Allow-Method: This header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above. For example,
Access-Control-Allow-Method: GET, POST.
- Access-Control-Allow-Headers: Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request. This header is the server-side response to the browser's
Let's look at client-server interaction with pre-flight request fired first, and upon receiving 2xx for
OPTIONS request with headers value set, the main request is fired.
Now, we know why CORS happens and in order to fix it, the recipient server needs to respond with certain headers. Most of the languages and frameworks have tons of packages/libraries doing this for us. But if we need to implement something like this, the best would be to write a middleware like below.
So, in the article, we understood why CORS Errors happen and how we can fix them. Remember that CORS error is a security feature built-in in modern-day web browsers and the same problem won't arise if let's say you use some client like Postman. So next time you encounter the CORS error, instead of getting frustrated, just set the headers as per your requirement and the CORS error will be handled.