A summary of Ajax cross-domain issues

What is cross-domain?

First of all, the same origin, the same-origin strategy is a browser security policy, the so-called homologous refers to the domain name, protocol, the port is exactly the same. and cross-domain is different source!

Ability to make cross-domain requests

General A,img,link[rel=stylesheet],video,audio, and so on can make the request of the tags are able to achieve cross-domain access. However, these tags do not get the returned items, so they are not generally used to request resources.

Common cross-domain processing scenarios:

Because of the inherent design of Ajax, cross-domain access cannot be achieved. So there is the problem of dealing with cross-domain.
①jsonp to handle cross-domain, the following is implemented with jquery, the key code is as follows:

$.ajax({  "GET",  url : "http://www.a.com/index.php?message=msg&callback=?",  dataType : "jsonp",  jsonp: ‘callback‘,  success : function(json){ console.log(json.msg); }});

② Service-Side settings Access-control-allow-origin
We use Nodejs to complete the problem. The service-side code is as follows:

"Use Strict"Const HTTP =Require' http ');const server = Http.createserver (); server. on ( Request ', (req,res) =>{res.writehead (200,{ "Content-Type":  "Text/plain",  "Access-control-allow-origin":  "Ajax cross Domain"); res.end ();}) server. listen (3000, (Err) =>{if (err) {return console.log (err.message);} console.log ( ' server is on ');})      

The browser-side code is as follows:

function(){  var xhr = new XMLHttpRequest(); xhr.open("post","http://localhost:3000/"); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ console.log(xhr.responseText); } } } xhr.send(null);}

When you use HTTP to access the client Web page, the data returned from the different sources is output.
③ other cross-domain policy iframe, window.postmessage (), etc.
See: http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html

④ uses the Watercress API to simply encapsulate a cross-domain request function:

<Script>    /* Encapsulate data cross-domain URL params fn */functionCrossdomain(URL,PARAMS,FN) {var head = document.getElementsByTagName (' Head ') [0];1. Handling Callback Functionsvar cbname =' Jsonp ' + (Math.random () *Math.random ()). ToString (). substr (2) +NewDate (). GetTime ();/* Mount the callback function on the Window object */window[cbname] =function(data) {Get and process the data FN;Get the data and remove it.Head.removechild (Scriptobj); }2. Parsing URLsvar qstring =‘‘;Forvar keyIn params) {qstring + = key +' = ' + params[' key ' + ' & ';} qstring + = ' callback= ' + cbname; URL + = '? ' + qstring; //3. Insert Script var scriptobj = document.createelement (' script '); scriptobj.src = URL; Head.appendchild ( Scriptobj); }</script><script> /* use */crossdomain (' http://api.douban.com/v2/ Movie/in_theaters ', {},function(data) {Console.log (data);}) </script>                 

A summary of Ajax cross-domain issues