Ajax + Spring MVC implement cross-origin request (JSONP), mvcjsonp

Ajax + Spring MVC implement cross-origin request (JSONP), mvcjsonp
Background: AJAX sends a request to the backend (springmvc) with the following error: the cross-Source request has been blocked: The same-source policy does not allow reading remote resources on http: // 127.0.0.1: 8080/DevInfoWeb/getJsonp. You can move resources to the same domain name or enable CORS to solve this problem.

Baidu found that there was a problem with cross-origin request. The collected information is as follows:

JSONP description

Before explaining JSONP, we need to understand the concept of "same-origin policy", which is helpful for understanding cross-origin. For security reasons, the browser has a same-origin policy mechanism. The same-origin policy prevents you from retrieving or setting attributes of a document or script loaded from one source. A bit around, simply put, the browser restricts that scripts can only interact with scripts of the same Protocol, same domain name, and same port.

JSONP is used to solve this problem. JSONP is short for JSON with Padding and is an unofficial protocol. It allows the server to generate the script tags return value client and implement site access in the form of javascript callback. JSONP is a script tag injection. Adding the response returned by the server to the page is a specific function.

In short, JSONP itself is not a complex thing, that is, the dynamic parsing of javascript documents through the scirpt tag bypasses the browser's same-source policy.

JSONP Principle and Implementation

Next, we will simulate a solution for cross-origin requests. The backend is in the Spring MVC Architecture, and the front end uses Ajax for cross-origin access.

1. First, the client needs to register a callback (the server can get the js function name (jsonpCallback) through this callback (jsonp), and then use JavaScript

Method to generate a function

2. Next, place the JSON data directly in the function as an input parameter. In this way, a js syntax document is generated and returned to the client.

3. Finally, the client browser dynamically parses the script tag and executes the returned JavaScript syntax file segment. At this time, the data is passed as a parameter to the pre-defined

Callback function ).

This kind of dynamic parsing js documentation is similar to eval functions.

After some efforts, the solution is as follows:

SpringMVC:

@ RequestMapping ("/get") public void get (HttpServletRequest req, HttpServletResponse res) {res. setContentType ("text/plain"); String callbackFunName = req. getParameter ("callbackparam"); // obtain the js function name try {res. getWriter (). write (callbackFunName + "([{name: \" John \ "}])"); // return jsonp data} catch (IOException e) {e. printStackTrace () ;}@ RequestMapping ("/getJsonp") @ ResponseBody public JSONPObject getJsonp (String callbackparam) {Company company Company = new company (); Company. setAddress ("Guangzhou Tianhe huajing Software Park"); company. setEmail ("123456@qq.com"); company. setName ("Guangzhou xundong network Co., Ltd."); company. setPhone ("12345678912"); return new JSONPObject (callbackparam, company );}

AJAX:

<! DOCTYPE html> 



References:
Http://www.2cto.com/kf/201411/351856.html
Http://blog.csdn.net/d8111/article/details/45249871