Introduction
To use XmlHttpRequest/Fetch to get resources from different origin (scheme + domain + host + port), Cross-Origin Resource Sharing (CORS) is a policy implemented in the server-side and the browser.
Cross-domain request are always controlled by CORS
- The Origin header of the request and the Access-Control-Allow-Origin header of the response has to be the same
- The Access-Control-Allow-Origin header of the response is *
Origin
First-level domain (Top-level domain)
- Country
- e.g,
.com (commercial)
,.org (organizaion)
- e.g,
- Category
- e.g.,
.ie (ireland)
- e.g.,
Same-origin policy
- URLs have the same schema, domain, host, and post
- The cross-domain requests from JavaScript are usually limited like XMLHttpRequest or Fetch API
- The cross-domain requests from HTML are usually unlimited like script, img, link, iframe, video
For CORS, there are two kind of requests.
1. Simple request
Only use following methods
- HEAD, GET, or POST
Only contains following HTTP headers
- Accept
- Accept-Language
- Content-Language
- Content-Type: application/x-www-form-urlencoded、multipart/form-data、text/plain
- Last-Event-ID
Example request
var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/public-data/';
function callOtherDomain() {
if(invocation) {
invocation.open('GET', url, true);
invocation.onreadystatechange = handler;
invocation.send();
}
}
Sequence diagram
- The browser adds origin in the HTTP request header if the request meets the requirements of the simple request
- The server responses with Access-Control-Allow-Origin and resources if the origin is valid.
- image source: https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS
2.Non-simple request
Use other methods
- like DELETE or PUT
Contains other HTTP headers
- like Content-Type: application/json
Example request
var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/post-here/';
var body = '<?xml version="1.0"?><person><name>Arun</name></person>';
function callOtherDomain(){
if(invocation)
{
invocation.open('POST', url, true);
invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
invocation.setRequestHeader('Content-Type', 'application/xml');
invocation.onreadystatechange = handler;
invocation.send(body);
}
}
Sequence diagram
- The browser sends pre-flight requests if the request meets the requirements of the non-simple request with the OPTIONS method
- The server responses with Access-Control-Allow-Origin and Access-Control-Allow-Methods if the origin is valid.
- The browser sends the real request to the server with origin
- The server responses with Access-Control-Allow-Origin and resources
- image source: https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS
That's it!
Articles
There are some of my articles. Feel free to check if you like!
- My blog-posts for software developing: https://medium.com/a-layman
- My web resume: https://jenhsuan.github.io/ALayman/cover.html
- Facebook page: https://www.facebook.com/imalayman
- My latest side project - Daily Learning: https://daily-learning.herokuapp.com/
Top comments (0)