JavaScript - CORS - Cross Origin Resource Sharing

javascript

https://www.sitepoint.com/an-in-depth-look-at-cors/

// JavaScript - CORS:

Cross-Origin Resource Sharing (CORS) is a specification to allow cross-domain 
communication from the browser. This is done by including a new 
Access-Control-Allow-Origin HTTP header in the response.

We could add the following to a .htaccess file (assumes Apache) to permit 
requests from a different origins:
Header add Access-Control-Allow-Origin "http://my-domain.com"
Header set Access-Control-Allow-Origin "*"

<?php
header("Access-Control-Allow-Origin: *")
header("Access-Control-Allow-Origin: http://example.com");
?>

Access-Control-Allow-Origin header itself does not allow multiple hosts inserted 
in the header, no matter the delimiter. This means that if you want to allow a 
cross-origin request from various different domains, you have to dynamically 
generate your header. 

<?php
$allowedOrigins = array("http://example.com", "http://localhost:63342");
$headers = getallheaders();
if ($headers["Origin"] && in_array($headers["Origin"], $allowedOrigins)) {
    header("Access-Control-Allow-Origin: " . $headers["Origin"]);
}
?>

If you are running something other than Apache, look here: 
http://enable-cors.org/server.html

If you open your browser’s console, you would get a message similar to: 
XMLHttpRequest cannot load http://example.com. No ‘Access-Control-Allow-Origin’ 
header is present on the requested resource.

Internet Explorer 8 and 9 support CORS only through the XDomainRequest class. 
The main difference is that instead of doing a normal instantiation with something 
like var xhr = new XMLHttpRequest() you would have to use 
var xdr = new XDomainRequest();.
IE 11, Edge and all recent and not-really-recent versions of Firefox, Safari, Chrome, 
Opera fully support CORS. IE10 and Android’s default browser up to 4.3 only lack 
support for CORS when used for images in <canvas> elements.

Some safety is maintained in the cross-origin request and the credentials (such as 
cookies) are not leaked during the request-response exchange. Furthermore, if 
the remote server does not specifically allow the user credentials for its website to 
be included in a cross-origin request from another website and that website does 
not explicitly declare it wants the user credentials to be passed to the remote server, 
then the site making the request will most likely get a response that is not 
personalized. This happens because the user session cookies would not go to the 
request and the response will not contain data relevant to a particular logged-in 
user which reduces CSRF and other exploits.

If we want to include the user credentials with the remote request, we have to do 
two changes, the first in the code of the website making the request and the 
second in the website receiving the request. In the website making the request 
we have to set the withCredentials property of the Ajax request to true:

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

The remote server itself, besides allowing our origin, has to set an 
Access-Control-Allow-Credentials header and set its value to true. Using the 
numbers 1 or 0 would not work.

However, allowing the credentials to be passed to a cross-origin request is quite 
dangerous, since it opens up the possibility for various attacks such as CSRF 
(Cross-Site Request Forgery), XSS (Cross-Site Scripting) and an attacker could 
take advantage of the user’s logged in status to take actions in the remote 
server without the user knowing (such as withdrawing money if the remote 
server is banking website).

Internet Explorer 8 and 9 support CORS only through the XDomainRequest class. The main difference is that instead of doing a normal instantiation with something like var xhr = new XMLHttpRequest() you would have to use var xdr = new XDomainRequest();.
IE 11, Edge and all recent and not-really-recent versions of Firefox, Safari, Chrome, Opera fully support CORS. IE10 and Android’s default browser up to 4.3 only lack support for CORS when used for images in <canvas> elements.