DEV Community

loading...
Cover image for Day 33 of #100DaysOfCode: Review CORS

Day 33 of #100DaysOfCode: Review CORS

jenhsuan profile image Jen-Hsuan Hsieh Updated on ・2 min read

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

  1. The Origin header of the request and the Access-Control-Allow-Origin header of the response has to be the same
  2. The Access-Control-Allow-Origin header of the response is *

Origin

Alt Text

Same-origin policy

  1. URLs have the same schema, domain, host, and post
  2. The cross-domain requests from JavaScript are usually limited like XMLHttpRequest or Fetch API
  3. 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(); 
  }
}
Enter fullscreen mode Exit fullscreen mode

Sequence diagram

  1. The browser adds origin in the HTTP request header if the request meets the requirements of the simple request
  2. The server responses with Access-Control-Allow-Origin and resources if the origin is valid.

Alt Text

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); 
    }
}
Enter fullscreen mode Exit fullscreen mode

Sequence diagram

  1. The browser sends pre-flight requests if the request meets the requirements of the non-simple request with the OPTIONS method
  2. The server responses with Access-Control-Allow-Origin and Allow-Control-Allow-Methods if the origin is valid.
  3. The browser sends the real request to the server with origin
  4. The server responses with Access-Control-Allow-Origin and resources

Alt Text

That's it!

Articles

There are some of my articles. Feel free to check if you like!

References

Discussion (0)

pic
Editor guide