What’s CORS?

Lara Mo
3 min readAug 1, 2023

--

Cross-origin resource sharing? what is it? Have you ever stumbled upon a CORS error?

OF COURSE… now let's get to the CORE of it…

cors gif
CORS animation

🏁Some information before start

  • The user will use a browser to access a website. I will refer to this as a client
  • The client will exchange resources (images, stylesheets, scripts, data, …) with a server through API calls.
    ex: /getUser is an endpoint that will be stored on the sever and will return a list of users
  • The client and the server communicate over a network using the HTTP protocol
  • client server is a request vs. serverclient is a response
  • The HTTP header consists of key-value pairs and allows the client and the server pass additional information with a request or a response

👽 What was used before CORS?

JSONP — stands for JSON with padding is a way old fashion technique used in JavaScript to make a request to another domain using the script tag:

<script src="myscript.com"/>

but…

  • JSONP supports only GET requests
  • The response coming from the request will be automatically executed by the browser, that is, we can’t parse it
  • No HTTP error code is returned to track the status of the request (success, redirection, client/server error…)

🖼️ The big picture of CORS

  • Modern browsers support the Same origin policy. They automatically allow you to fetch anything from your domain, but they block any external/cross-origin requests unless certain conditions are met.
  • The conditions may be specified in the HTTP header

🔄 How it works?

Let's say the client is hosted on “www.laramo.com” and the server is “www.getYourData.com”

  • CORS will allow you to specify what domains can access your endpoint hosted on the server.
  • CORS will also allow you to specify what methods are allowed to be called (GET, POST, PUT, DELETE, …)
  • If the client requests to www.getYourData.com/summerTodos , this endpoint should specify the value of the origin they allow to call this endpoint like so:
    Access-Control-Allow-Origin: “www.laramo.com”
  • In Node.js you can use the cors library to simplify the syntax a little:
const cors = require('cors');

app.use(cors({
origin: "www.laramo.com"
))

✈️ Preflight

  • Preflight is a special cached request sent to the server before calling the actual endpoint to see if the server allows this type of method.
  • This usually applies to methods like DELETE and PUT that have an after-effect on the data.
  • On the server, we will specify the method that is allowed to be expected by the client
  • Hence if the client is sending a PUT request but the server is only expecting GET requests, it will be rejected with the following error:

OPTIONS https://getYourData.com/ net::ERR_ABORTED 405 (Method Not Allowed) Access to fetch at https://getYourData.com/from origin 'http://laramo.com has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

const cors = require('cors');

app.use(cors({
origin: "www.laramo.com",
method: "GET"
// Can be also an array of possibilities ["GET", "POST", "PUT"]
))

💁 Request headers to send to the server:

When you send a request to the server, you may specify the following parameters in your request header:

  • Origin → where the request is initiated
  • Access-Control-Request-Method → GET, POST…
  • Access-Control-Request-Headers → additional information to add to the request such as the type of data:
"Content-Type", "text/xml"

📙 Response headers to receive from the server:

  • Access-Control-Allow-Origin → what origins are allowed to request this server, that is, where can the request be initiated from
  • Access-Control-Allow-Methods → what methods are allowed to be sent to this server
  • Access-Control-Allow-Credentials
  • Access-Control-Expose-Headers
  • Access-Control-Max-Age: how long do you want to cache your headers for, default is 5s
  • Access-Control-Allow-Headers

Lastly…

Fun fact: img tags don’t require CORS at all and can access any public image

<img src="https://cdn.vox-cdn.com/thumbor/wfbQ3XccV6SxGMt1l6zBPL3Xg7o=/0x0:1192x795/1400x1050/filters:focal(596x398:597x399)/cdn.vox-cdn.com/uploads/chorus_asset/file/22312759/rickroll_4k.jpg"/>

That’s it for today’s COURSE :),
Go code now,

Lara Mo

--

--

Lara Mo

Student @Concordia University | Front-end developer @Plusgrade Passionate about React, JS, CSS, HTML and coffee :) | Coding & coffee is my moto ☕👩‍💻