1. What is cross-domain access

The content of this article is about the analysis of jsonp cross-domain access (front-end and back-end). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. What is cross-domain access Give a chestnut : In website A, we hope to use Ajax to obtain specific content in website B. If website A and website B are not in the same domain, then there will be a cross-domain access problem. You can understand that two domain names cannot send requests or request data across domain names, otherwise it will be unsafe. Cross-domain access violates the same-origin policy. For detailed information on the same-origin policy, you can click on the following link: Same-origin_policy; Domain name or IP) resources.

2. What is JSONP JSONP (JSON with Padding) is a "usage mode" of JSON that can be used to solve the problem of cross-domain data access by mainstream browsers.

Due to the same-origin policy, generally speaking, web pages located at server1.example.com cannot communicate with servers other than server1.example.com, and the element of HTML is a exception. Using this open strategy of the element, web pages can obtain JSON data dynamically generated from other sources, and this usage pattern is the so-called JSONP. The data captured with JSONP is not JSON, but arbitrary JavaScript, which is executed with a JavaScript interpreter instead of parsed with a JSON parser. More specific principles require more space to explain, and you can go to Baidu by yourself.

3. Use of JSONP Front-end usage example JQuery Ajax encapsulates JSONP very well, and it is very convenient for us to use. Front-end example: $.ajax({ type:"GET", url:"http://www.deardull.com:9090/getMySeat", //访问的链接 dataType:"jsonp", //数据格式设置为jsonp jsonp:"callback", //Jquery生成验证参数的名称 success:function(data){ //成功的回调函数 alert(data); }, error: function (e) { alert("error"); } }); Copy after login Copy after login

What needs to be noted is:

dataType, this parameter must be set to jsonp

jsonp , the value of this parameter needs to be agreed with the server, details are introduced below. (The conventional default value is callback)

Cooperation example of backend JQuery Ajax Jsonp principle To use jsonp in conjunction with the backend, you must first Understand a feature of Jquery Ajax jsonp: When Jquery sends an Ajax jsonp request, it will automatically add a verification parameter after the access link. This parameter is randomly generated by Jquery, such as the link

http ://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046 , parameter callback=jQuery31106628680598769732_15121863 87045&_=1512186387046 is automatically added by jquery. The purpose of adding this parameter is to uniquely identify this request. When the server receives the request, it needs to construct the value of the parameter with the actual json value to be returned (how to construct it is explained below) and return it, and the front end will verify this parameter. If it is the parameter it sent before, then The data will be received and parsed. If it is not this parameter, then it will be rejected. What needs special attention is the name of this verification parameter (I wasted 2 hours on this pit). This name comes from the value of the front-end jsonp parameter. If the value of the front-end jsonp parameter is changed to "aaa", then the corresponding parameter should be aaa=jQuery311106628680598769732_1512186387045&_=1512186387046

Back-end reception and processing I know Jquery Ajax Jsonp The principle and the parameters that need to be accepted are known, and we can write the server-side program. In order to cooperate with json, what the server needs to do can be summarized into two steps:

The first step is to receive verification parameters Receive verification according to the jsonp parameter name agreed with the front-end Ajax Parameters, examples are as follows (using SpringMVC, other languages and frameworks have similar principles) @ResponseBody @RequestMapping("/getJsonp") public String getMySeatSuccess(@RequestParam("callback") String callback){ Copy after login

The second step is to construct parameters and return Combine the received verification parameter callback with the actual json data to be returned Constructed according to the "callback(json)" method: @ResponseBody @RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){ Gson gson=new Gson(); //google的一个json工具库 Map map=new HashMap<>(); map.put("seat","1_2_06_12"); return callback+"("+gson.toJson(map)+")"; //构造返回值 } Copy after login

IV. Summary Finally, the corresponding code for the front and back ends should be like this: Front end $.ajax({ type:"GET", url:"http://www.deardull.com:9090/getMySeat", //访问的链接 dataType:"jsonp", //数据格式设置为jsonp jsonp:"callback", //Jquery生成验证参数的名称 success:function(data){ //成功的回调函数 alert(data); }, error: function (e) { alert("error"); } }); Copy after login Copy after login

Backend @ResponseBody @RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){ Gson gson=new Gson(); Map map=new HashMap<>(); map.put("seat","1_2_06_12"); logger.info(callback); return callback+"("+gson.toJson(map)+")"; } Copy after login

It should be noted that:

The front-end pays attention to communicating with the back-end to agree on the value of jsonp, usually the default All use callback.

After the backend obtains the parameters according to the jsonp parameter name, it must be constructed in a "callback(json)" manner with the json data to be returned.