Browser / HTTP - CORS getting started and explanation

1 - About

When web developers begins to develop an API, they meet unfortunately a CORS policy violation such as below when they try to make a cross-origin request

Access to XMLHttpRequest at 'https://datacadamia.com/doc/api/weather_no_cors' from origin 'https://fiddle.jshell.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and they need then to understand what a CORS policy is.

This article tries to explain:

  • what it's,
  • why it's important
  • and how to resolve this problem.

3 - Steps

3.1 - Why I get a CORS policy violation error

CORS means Cross Origin Resource Sharing (CORS).

The term cross origin refers to cross origin request that describe:

  • a request that is made by a script or html page that comes from an origin
  • that tries to get a resource of another origin.

In this example:

By default and due to the same-origin policy, this is not allowed. And the browser does not allow it by showing you an error message in the console.

3.2 - CORS policy violation demo


$.ajax({
  url: "https://datacadamia.com/doc/api/weather_no_cors",
  success: function( result ) {
    console.log(result + " degrees" );
  }
});

  • Hover above the console output that should show 23 degrees and click on the Try the code link at the upper right side to load the code on JSFiddle.

  • On the JSFiddle website, if you open the console by pressing the F12 key, you should see this message:

cors_blocked.jpg

Access to XMLHttpRequest at 'https://datacadamia.com/doc/api/weather' from origin 'https://fiddle.jshell.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  • Specifically, the line No 'Access-Control-Allow-Origin' header is present on the requested resource. tells you that the browser was expecting the Access-Control-Allow-Origin header in the response but has not found it at all.

3.3 - What is that Access-Control-Allow-Origin ?

The CORS policy is a whole protocol that permits to configure if a browser should allow or disallow a cross-origin request. The configuration is set up via several CORS headers.

Access-Control-Allow-Origin is the most important one and lists the origin of script/page that can access the resource of your web page.

For instance, to allow all web site to query resource, you need to return in your response, this header with a * value.


Access-Control-Allow-Origin: *

In our case, we have chosen to allow only JsFiddle:


Access-Control-Allow-Origin: https://fiddle.jshell.net

3.4 - How to set the Access-Control-Allow-Origin ?

This header can be set manually for every response in your web application or if you use a web server, you can configure it.

For instance with Apache in a htaccess file


Header set Access-Control-Allow-Origin "https://fiddle.jshell.net"

Each server have different way to configure the response header. See the Enable section of the cors page to get a list of them

3.5 - CORS request after setting the Access-Control-Allow-Origin

We have added this header to the resource https://datacadamia.com/doc/api/weather.


$.ajax({
  url: "https://datacadamia.com/doc/api/weather",
  success: function( result ) {
    console.log(result + " degrees" );
  }
});

  • Hover above the console output that should show 23 degrees and click on the Try the code link at the upper right side to load the code on JSFiddle.

  • And you should see in JsFiddle also 23 degrees on the Fiddle website because https://fiddle.jshell.net is now able to make a request against this resource.

cors_request_output_on_jsfiddle.jpg

3.6 - How to check the value of the Access-Control-Allow-Origin header

chrome_network_header_access-control-allow-origin.jpg

3.7 - Conclusion

This getting started gives you an overview of what CORS is and covers the most important configuration header of the CORS policy.

If you want to know more about the whole procedure, see this page Browser - Cross Origin Resource Sharing (CORS)


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap