Rapid resolution of cross domain requests: jsonp and CORS

There are various cross domain tutorials, practices and Q & A on the Internet. In addition to simple jsonp, many CORS are not feasible. There are always one or two key configurations missing. This article only wants to solve the problem, and all the code has been practiced by yourself.

This paper solves the problems of get, post, data, cookie and so on in cross domain.

This article will only talk about get request and post request. Readers should understand post request as all other request methods except get request.

JSONP

Jsonp uses the principle that the browser has no homology restriction on the resource reference of script, and dynamically inserts a script tag, which will be executed immediately after the resource is loaded into the page. Jsonp is an informal transport protocol. A key point of the protocol is to allow the user to pass a callback or define a callback method and parameters to the server at the beginning. When the server returns data, it will wrap the JSON data with the callback parameter as the function name, so that the client can customize its own function to automatically process the returned data.

Jsonp only supports get requests and does not support post and other types of HTTP requests. It only supports cross domain HTTP requests, which can not solve the problem of how to call JavaScript between two pages in different domains. Jsonp has the advantage of supporting old-fashioned browsers and obvious disadvantages: it needs customization on the client and server for development, The data returned by the server cannot be the standard JSON data, but the data of the callback package.

The principle of jsonp is very simple, using the idea that there is no cross domain problem when the front end requests static resources.

But only get, only get, only get.

Note that since this method is called jsonp, the back-end data must use JSON data. You can't just make a string or something, otherwise you will find the result inexplicable.

Front end jQuery writing

dataType: “jsonp”。 Except for this, other configurations are the same as ordinary requests.

Backend spring MVC configuration

If you also use spring MVC, you can configure a jsonp advice, so that each controller method we write does not need to consider whether the client is a jsonp request, and spring will automatically handle it accordingly.

The above writing requires that the spring MVC version is no less than 3.2. If it is less than 3.2, I can only say that you should upgrade.

Backend non spring MVC configuration

When I first worked in the past, struts 2 was still popular. In a few years, spring MVC basically dominated the domestic market.

Take a lazy look. Here is a pseudo code. Before we return to the front end of our method, we will adjust the wrap method.

CORS

Cross-Origin Resource Sharing

CORS is a way for modern browsers to support cross domain resource requests, The full name is "cross domain resource sharing" (cross originresources sharing). When using XMLHttpRequest to send a request, the browser finds that the request does not conform to the source policy, and will add a request header: origin. A series of processing will be carried out in the background. If it is determined to accept the request, a response header: access control allow origin will be added to the return result. The browser will judge whether the corresponding header contains origin If yes, the browser will process the response and we can get the response data. If it does not include the browser's direct rejection, we can't get the response data.

CORS has the same purpose as jsonp, but it is more powerful than jsonp. CORS supports all browser request types, carries a larger amount of request data, is more open and concise, and the server only needs to return the processed data directly without special processing.

After all, jsonp only supports get requests, which certainly can't meet all our requests, so we need to move out of CORS.

Domestic web developers are still hard pressed. Users don't upgrade their browsers, and the boss still wants developers to be compatible.

CORS supports the following browsers. At present, the problem of browsers is becoming less and less important. Even Taobao does not support IE7~~~

Chrome 3 + Firefox 3.5 + opera 12 + Safari 4 + Internet Explorer 8 + front end jQuery writing

Just look at the code:

Datatype: "JSON", here is JSON, not jsonp, not jsonp, not jsonp.

Crossdomain: true. This represents the use of cross domain requests

Xhrfields: {withcredentials: true}, so that the configuration can bring the cookie, otherwise we can't even maintain the session, and many people are planted here. Of course, if you don't have this requirement, you don't need to configure this.

Backend spring MVC configuration

For most web projects, there are MVC related configuration classes, which inherit from webmvcconfigureradapter. If you also use spring MVC version 4.2 or above, you can directly add this method as follows:

Unfortunately, if the version of spring MVC in your project is lower than 4.2, you need to "save the country by curve":

On the web Configure the following filter in XML:

Many projects use Shiro. You can also configure Shiro filters, which will not be introduced here.

Note that I am talking about a very general configuration, which can be configured in such a general way for most projects. Readers should know how to match the configuration similar to "*" in the article.

If the reader finds that the browser prompt cannot use the '*' symbol, the reader can get the referer (request. Getheader ("referer") in the request header according to the request object in the above filter, and then dynamically set "access control allow origin":

Front end non jQuery writing

The days when jQuery can eat all over the world are gone. Here's how to solve the cross domain problem of post if jQuery is not used.

Let's have a native JS introduction:

Among them, the "programmer friendly" browsers such as chrome, Firefox, opera and safari use the xmlhttprequest2 object. Ie uses xdomainrequest.

summary

The above is all about how to quickly solve the cross domain request problem: jsonp and CORS. I hope it will be helpful to you. Interested friends can continue to refer to other related topics on this site. If there are deficiencies, please leave a message and point out!