What is CORS (Cross Origin Resource Sharing)?

A guide to Cross-Origin Resource Sharing.

Rajan V
Rajan V
Jan 3 · 4 min read
Photo by Chris Ried on Unsplash

CORS allows us to break the same origin policy of the browser. It allows to load the resources from different origin. This will be useful when javascript trying to make API Call using XMLHttpRequest or fetch to different domain, it will be blocked by the browser due to same origin policy.

What is Same origin policy?

Same origin Policy is a mechanism which defines how a resource from one origin can interact with other origin. By default, browser allows to load the resource from the same origin. This is for the security purpose to reduce the possible attacks.

When you are making the AJAX request from abc.com to xyz.com. You must encounter the following error.

This error is due to the Same Origin Policy of the browser. By using CORS, we can break the Same Origin Policy and use the resources from the different domain.

When you requested a resource from abc.com to xyz.com ,the browser automatically add origin:abc.com header in the request and in response , it will check the Access-Control-Allow-Origin:xyz.comheader to match the origin header. If the header value is different from the origin header, it will get blocked due to the same origin policy on the browser. Note — response is getting blocked, not the request.

Browser identifies which resources can be accessed by using the header Access-Control-Allow-Origin. This header specifies which origin can access the resources.

To allow access from any origin — Access-Control-Allow-Origin: *

To a specific origin — Access-Control-Allow-Origin: https://abc.com

CORS Request Types

There are two types of CORS request: “simple” requests, “preflight”requests. Browser will automatically figured out which request has to make to the server. Usually, we will see different kind of request in the network log.

Simple Requests

If the requests meets the following, it’s considered as simple request.

  1. Request methods: GET,POST
  2. Content Type of the following: application/x-www-form-urlencoded, multipart/form-data, or text/plain
  3. CORS Safe headers

The above image shows the request and response in case of Simple Request.

Preflight Requests

In case of preflight requests, the browser will make automatic request using OPTIONS method. This is used to determine the exact capabilities of the actual request. If the response of the request indicates that request can’t be made then the actual request to the server won’t be executed. The preflight options request is data less.

The preflight request sets couple of headers automatically, few important one’s are the following,

Access-Control-Request-Method — Actual method of the request.

Access-Control-Request-Headers — Custom headers that will be sent with the request.

The preflight response get following headers,

Access-Control-Allow-Origin — Origin allowed to make the request.

Access-Control-Allow-Methods — Comma separated HTTP Methods allowed to make the request.

Access-Control-Allow-Headers — Comma separated headers allowed to set in the request.

The response of the preflight request is examined by the browser to decide whether to continue with the actual request or discard it. Once the preflight request is successful, then it is treated as a simple request.

The above image shows the request and response in case of preflight request. Suppose the site abc.com wants to make a Put Request to xyz.com,

  1. First the OPTIONS request sent to the server,
  2. Based on the response header of the request

If it’s successful, actual PUT method will be sent to the server.

If not, the request will be discard by the browser.

Sample preflight request

I hope you found this article useful. Any suggestions for improvements or feedback are very much appreciated.

Thanks for reading.

JavaScript in Plain English

Learn the web's most important programming language.

Rajan V

Written by

Rajan V

Introvert | Front End Developer.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade