# CORS & CORB
# CORS
CORS stands for Cross-Origin Resource Sharing. It is the process that controls how files are fetched by the browser. It enforces the Same-Origin policy. Read more about the Same-Origin Policy (opens new window)
Simple requests for files can be made as an HTTP GET or POST request. HEAD requests, which are just like test calls, are also considered to be simple requests. There is a limited number of headers that are considered safe-listed which can be used for a simple request. See this page (opens new window) for a list of the safe-listed headers. Simple Requests are not considered to be CORS requests.
Any request made with fetch or any general request that doesn't meet the simple request requirements, is subject to the CORS rules.
# CORS Process
The process for CORS requests is simple. If the browser decides that it needs to make a CORS request then it will make an initial HTTP call with the OPTION method to the URL. This is known as a pre-flight request.
Along with the HTTP Response to the OPTION request, the server needs to send a specific header.
Access-Control-Allow-Origin: *
This Access-Control-Allow-Origin header can have a value that matches a specific ip address or a wildcard asterix. If it has an exact ip address then it must match the ip address of the browser.
# CORS with fetch
When making a fetch call, the default is for the request to be made as a CORS request. However, if you are making a simple fetch request to the same domain as the webpage and you are not setting a content-type and not uploading a file then we can change the mode.
We can change the mode within the Request object options.
let req = new Request(url, {
method: 'GET',
mode: 'same-origin'
});
fetch(req)
.then(resp => resp.json())
.then(console.log)
.catch(console.error);
2
3
4
5
6
7
8
Now it will not make the pre-flight request for this fetch.
# CORS Errors
This MDN page (opens new window) has a list of all the possible CORS Errors you can have.
# CORB and CORP
CORP stands for Cross-Origin Resource Policy.
Cross-Origin Resource Policy is an HTTP header that lets web sites and applications opt in to protection against certain cross-origin requests (such as those issued with elements like <script> and <img>), to mitigate speculative side-channel attacks as well as Cross-Site Script Inclusion attacks.
CORB stands for Cross-Origin Read Blocking.
Cross-Origin Read Blocking works in conjunction with requests that bring back resources which need to be read into memory in the browser. If the browser sees a resource coming from a different domain, and the resource needs to be read into memory in the browser then the browser can choose to block that load.
<iframe>, <object>, and <embed> elements are exempt from CORB restrictions.
In general, the restrictions in CORB apply when loading a document that has a mime-type of text/html, application/json, text/plain, text/xml, or application/xml.
For a full explanation of the protections created with CORB you can read this page (opens new window). Alternatively, this page (opens new window) has a shorter explanation with a video.
# References
MDN CORS reference (opens new window)
MDN pre-flight request reference (opens new window)
MDN Same-Origin Policy (opens new window)