Cross-Origin Resource Sharing in JavaScript Frameworks

Why Do You Need CORS?

Web developers encounter the Same Origin Policy when they need to use resources in more than a single domain. Modern applications leverage CDNs, APIs and services hosted on multiple domains, so developers often need to be able to bypass the Same Origin Policy restrictions. Developers working with nodeJS and other JavaScript frameworks may need to expose resources in an application to code running on on other domains. Cross-Origin Resource Sharing (CORS) is a recommendation by The World Wide Web Consortium (W3C) which has been partly implemented by modern browsers: https://www.w3.org/TR/cors/

CORS provides a method to use resources across domains using HTTP headers for a handshake that vets the domain making the request as an allowed domain.

There is a "CORS Enabled" wiki maintained by the W3C with up-to-date information about CORS support: https://www.w3.org/wiki/CORS_Enabled

The Same Origin Policy is defined by the Internet Engineering Task Force (IETF) https://tools.ietf.org/html/rfc6454#page-4. The Same Origin Policy protects sensitive data, for example personal or application information stored in cookies. The Same Origin Policy also applies to XMLHttpRequest (XHR) - you can't make a cross-domain XHR request unless the target domain provides an Access-Control-Allow-Origin header allowing the domain making the request.

DOM Elements Allowed For Cross-Origin Sharing

You probably know that many DOM elements may be shared across domains freely:

• Images with the tag, as long as the file type matches expected image formats.
• Media files with the and tags as long as the file type matches expected media formats
• JavaScript with the tag.
• CSS with the tag. Cross-origin CSS requires a correct Content-Type header. Restrictions vary by browser.
• Plug-ins with the