{"id":103250,"date":"2021-10-20T08:48:28","date_gmt":"2021-10-20T15:48:28","guid":{"rendered":"https:\/\/www.backblaze.com\/blog\/?p=103250"},"modified":"2026-01-30T07:31:47","modified_gmt":"2026-01-30T15:31:47","slug":"crash-cors-a-guide-for-using-cors","status":"publish","type":"post","link":"https:\/\/www.backblaze.com\/blog\/crash-cors-a-guide-for-using-cors\/","title":{"rendered":"Crash CORS: A Guide for Using CORS"},"content":{"rendered":"

\"\"<\/p>\n

The dreaded CORS error is the bane of many a web developer\u2019s day-to-day life. Even for experts, it can be eternally frustrating. Today, we\u2019re digging into CORS, starting with the basics and working up to sharing specific code samples to help you enable CORS for your web development project. What is CORS? Why do you need it? And how can you enable it to save time and resources?<\/p>\n

We\u2019ll answer those questions so you can put the CORS bane behind you.<\/p>\n

What Is CORS?<\/strong><\/h2>\n

CORS stands for cross-origin resource sharing. To define CORS, we first need to explain its counterpoint\u2014the same-origin policy, or SOP. The SOP is a policy that all modern web browsers use for security purposes, and it dictates that a web address with a given origin can only request data from the same origin. CORS is a mechanism that allows you to bypass the SOP so you can request data from websites with different<\/em> origins.<\/p>\n

Let\u2019s break that down piece by piece, then we\u2019ll get into why you\u2019d want to bypass the same-origin policy in the first place.<\/p>\n

What Is an Origin?<\/strong><\/h3>\n

All websites have an origin, and it is defined by the protocol, domain, and port of its URL.<\/p>\n

\"\"<\/p>\n

You\u2019re probably familiar with the working parts of a URL, but they each have a different function. The protocol, also known as the scheme, identifies the method for exchanging data. Typical protocols are http, https, or mailto. The domain, also known as the hostname, is a specific webpage\u2019s unique identifier. You may not be as familiar with the port as it\u2019s not normally visible in a typical web address. Just like a port on the water, it\u2019s the connection point where information comes in and out of a server. Different port numbers specify the types of information the port handles.<\/p>\n

When you understand what an origin is, the \u201ccross-origin\u201d part of CORS makes a bit more sense. It simply means web addresses with different origins. In web addresses with the same origin, the protocol, domain, and port all match.<\/p>\n

What Is the Same-origin Policy?<\/strong><\/h3>\n

The same-origin policy was developed and implemented as a security measure against a specific website vulnerability that was discovered and exploited in the 2000s. Before the same-origin policy was in place, bad actors could use cookies stored in people\u2019s browsers to make requests to other websites illicitly. This is known as cross-site request forgery, or CSRF, pronounced \u201csea surf.\u201d It\u2019s also known as \u201csession riding.\u201d Tubular.<\/p>\n

Let\u2019s say you log in to Netflix on your laptop to add Ridley Scott\u2019s 1982 classic, \u201cBlade Runner\u201d to your queue, as one does. You click \u201cRemember Me\u201d so you don\u2019t have to log in every time, and your browser keeps your credentials stored in a cookie so that the Netflix site knows you are logged in no matter where you navigate within their site.<\/p>\n

Afterwards, you\u2019re bored, so you fall down an internet rabbit hole wondering why \u201cBlade Runner\u201d is called \u201cBlade Runner\u201d when there are few blades and little running. You end up on a site about samurai swords that happens to be malicious\u2014it has a script in its code that uses your authentication credentials stored in that cookie to make a request to Netflix that can change your address and add a bunch of DVDs to your queue (also, it\u2019s 2006, and this actually happened<\/a>). You\u2019ve become a victim of cross-site request forgery.<\/p>\n

To thwart this threat, browsers enabled the same-origin policy to prohibit requests from one origin to another.<\/p>\n

Why Do You Need CORS?<\/strong><\/h2>\n

While the same-origin policy helped stop bad actors from nefariously accessing websites, it posed a problem\u2014sometimes you need or want assets and data from different origins. This is where the \u201cresource sharing\u201d part of cross-origin resource sharing comes in.<\/p>\n

CORS allows you to set rules governing which origins are allowed to bypass the same-origin policy so you can share resources from those origins.<\/p>\n

For example, you might host your website\u2019s front end at www.catblaze.com, but you host your back-end API at api.catblaze.com. Or, you might need to display a bunch of cat videos stored in Backblaze B2 Cloud Storage on your website, www.catblaze.com<\/a> (more on that below).<\/p>\n

Do I Need CORS?<\/strong><\/h2>\n

Let\u2019s say you have a website, and you dabble in some coding. You\u2019re probably thinking, \u201cI can already use images and stuff from other websites. Do I need CORS?\u201d And you\u2019re right to ask. Most browsers allow simple http requests like get<\/code>, head<\/code>, and post<\/code> without requiring CORS rules to be set in advance. Embedding images from other sites, for example, typically requires a get<\/code> request to grab that data from a different origin. If that\u2019s all you need, you\u2019re good to go. You can use simple requests to embed images and other data from other websites without worrying about CORS.<\/p>\n

But some assets, like fonts or iframes, might not work\u2014then, you can use CORS\u2014but if you\u2019re a casual user, you can probably stop here.<\/p>\n

\n

Coding Explainer: What Is an http Request?<\/strong><\/p>\n

An http request is the way you, the client, use code to talk to a server. A complete http request includes a request line, request headers, and a message body if necessary. The request line specifies the method of the request. There are generally eight types:<\/p>\n