Client "cross-origin access" has been a headache, fortunately there is jquery help, from the jQuery-1.2 after the cross-origin problem will be solved. I encountered a cross-origin problem in the project. I took this opportunity to give a thorough understanding of the Cross-origin problem and read the relevant materials and my own practices. This solved the cross-origin problem. Record it for reference.
Jquery. Ajax () supports cross-origin in get mode, which is implemented in jsonp mode.
Real case:
$. Ajax ({
Async: false,
URL: 'http: // www.mysite.com/demo.do', // cross-origin URL
Type: 'get ',
Datatype: 'jsonp ',
Jsonp: 'jsoncallback', // default callback
Data: mydata,
Timeout: 5000,
Beforesend: function () {// jsonp mode this method is not triggered. The reason may be that if datatype is specified as jsonp, it is no longer an Ajax event.
},
Success: function (JSON) {// call back function pre-defined by jquery on the client. After obtaining JSON data on the Cross-origin server, the callback function is dynamically executed.
If (JSON. actionerrors. length! = 0 ){
Alert (JSON. actionerrors );
}
Gendynamiccontent (qsdata, type, JSON );
},
Complete: function (XMLHttpRequest, textstatus ){
$. Unblockui ({fadeout: 10 });
},
Error: function (xhr ){
// Jsonp mode. This method is not triggered.
// Handle request errors
Alert ("request error (Check related network conditions .)");
}
});
Note:
$. Getjson ("http://www.mysite.com/demo.do? Name1 = "+ value1 +" & callback =? ",
Function (JSON ){
If (JSON. attribute name = value ){
// Execute the code
}
});
This method is actually an advanced encapsulation of the $. Ajax ({...}) API in the previous example. Some underlying parameters of $. Ajax APIs are encapsulated and invisible.
On the server side, Use callback = request. getparameter ("Callback") to obtain the jsonp32440980 to be called back by the jquery end.
Then return the following code: "jsonp32440980 (" + JSON array to be returned + ")";
Jquery will dynamically load and call this through the callback method: jsonp32440980 (JSON array );
This achieves the purpose of cross-Origin data exchange.
The most basic principle of jsonp is to dynamically Add a consistent one (QQ space is a large number of cross-Origin data exchanges using this method ). Jsonp is a script injection action, so it also has certain security risks.
Note: jquey does not support cross-origin post.
This is because, although the use of post + dynamic IFRAME can achieve the purpose of post cross-origin (there is a JS cool who just put jquery1.2.5 in this way), this is an extreme way to do so, it is not recommended. It can also be said that the cross-origin of the get method is legal, and the POST method is considered illegal from the security point of view, the demand for cross-origin access on the client side also attracted W3C's attention. It is said that the HTML5 websocket standard supports cross-Origin data exchange and should also be an optional cross-Origin data exchange solution in the future.
Reference: http://www.jb51.net/article/21213.htm