Cross-domain access issues, I believe everyone has encountered. This is a very tricky question. But however persuasive, outsmart, there is always a solution to this kind of problem. Recently I have come into contact with this problem, the solution is AJAX+JSONP.
Speaking of this problem, we have to say "homologous strategy", which is a famous security policy proposed by Netscape. Same-origin. This policy is now used by all JavaScript-enabled browsers. The so-called homologous, it is necessary agreement, domain name, port are consistent, is called homologous. For example: http://www.12306.cn and https://www.12306.cn, because the protocol is inconsistent, it is not homologous. Http://127.0.0.1:8080/test1 and Http://localhost:8080/test1 also do not belong to the same origin, because the domain name is inconsistent. The port is different, of course, is not called homologous.
In the case of non-homologous, when requesting data, the browser will report an exception in the console prompting for access denied. This is a very painful problem for web developers. For example, I now open the Baidu Web page, and then in the console Request CSDN Web page, then the exception will be reported:
In, you may see this word-"access-control-allow-origin", which is a technique proposed by the standard to solve cross-domain problems caused by homologous policies--"cross-domain resource sharing (cors,cross-origin Resource sharing) ". As long as you set this access-control-allow-origin header on the server, you can allow cross-domain access. If you are interested, check it yourself, it is very simple. However, it has security implications, primarily because of the support for wildcards *. Every website can be requested at will, it is too insecure. Such as:
[Java]View Plaincopy
- Response.setheader ("Access-control-allow-origin", "*");
The Get method of $.ajax in query is supported for cross-domain access, but datatype is set to "Jsonp". JSONP (JSON with Padding) is a "usage pattern" of JSON that allows Web pages to get data from other domains. JSONP is implemented by using the JS callback mechanism. The way to use it is also simple, the code is as follows:
[JavaScript]View Plaincopy
- $.ajax ({
- URL: ' http://localhost:8080/test2/searchJSONResult.action ',
- Type: "GET",
- DataType: ' Jsonp ',
- Data: {name: "Zhanghuihua"}, timeout:5000,
- Success: function (JSON) {
- //Client jquery pre-defined callback function, after successfully obtaining JSON data on a cross-domain server, this callback function is executed dynamically
- alert (JSON);
- },
- Error: function () {
- Alert ("The request failed! ");
- }
- });
- The simple way is as follows:
- $.getjson ("http://localhost:8080/test2/searchJSONResult.action?name1=ZhangHuihua&callback=?",
- function (JSON) { //execute code
- });
On the server side, re-stitch the JSON data:
[Java]View Plaincopy
- /** get each parameter requested (user name, etc.) **/
- map map = request.getparametermap ();
- /** gets the JSONP callback function name **/
- string callback = Request.getparameter ( "callback");
- /** call the business logic and convert the result to JSON format **/
- String msg = convert2json (Services.login (map))
- /** re-stitching format, and output **/
- out.println (Callback +
This allows the browser to retrieve the JSON data returned from the source server. This return is not the same as the JSON format, which is formatted as a callback function name + (JSON array). Where the parentheses cannot be omitted. Otherwise the request was sent successfully, but the data was not obtained because the returned data format was wrong. As follows:
Jsonp break through the same-origin policy for cross-domain access requests