Enable Cross-Origin Resource Sharing with CORS Anywhere

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. There may be legitimate reasons for another website to block access to content via an iframe or jQuery load function and this is apparent when you get a response in the console like:-

Refused to display 'https://www.domainname.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

If your website should be allowed access to an external URL/Resource then the simple thing to do is to ask the owner to add your domain to their cross-origin policies. Alternatively, you can also allow Cross-origin resource sharing via CORS Anywhere which is a node.js proxy that adds CORS headers to the proxied request. If you want to automatically enable cross-domain requests when needed, use the following snippet: –

//CORS Anywhere is a node.js proxy which adds CORS headers to the proxied request.
//To use the API, just prefix the URL with the API URL. (Supports https: see github repository)
////If you want to automatically enable cross-domain requests when needed, use the following snippet:
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
}
});
$.get(
// enter your URL below
'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});

The Cross-Origin Resource Sharing snippet is simple to configure, and all you need to do is to enter the URL you want to reference below // enter your URL below where the current URL is a Wikipedia page about Cross-origin resource sharing.

You can now manipulate and embed the Cross-Origin URL on your website.

About the Author
Enable Cross-Origin Resource Sharing with CORS Anywhere 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.