Cross-domain resource sharing CORS and JSONP Cross-domain resource sharing (CORS) problem solution CORS cross-domain implementation ideas and related solutions

Same Origin Policy Restrictions:

Same origin policy is a convention. It is the core and most basic security function of browsers. If there is no same origin policy, attackers can obtain your emails and other sensitive information through JavaScript, such as reading private information. mail, send fake emails, view chat history and more. The so-called homologous means that the protocol, domain name, and port are the same. If only one of the three is different, it is considered a different source!

JSONP ：

JSONP (JSON with Padding) is an unofficial protocol that allows integrating Script tags on the server side and returning them to the client side, and realizing cross-domain access in the form of javascript callback (this is just a simple implementation form of JSONP).

Principle: Tags with src attributes can be cross-domain, such as img, script, iframe!

Essentially: just execute the javascript script!

Simply put, after the client declares the callback function, the client requests data from the server cross-domain through the script tag, and then the server returns the corresponding data and dynamically executes the callback function (returns the string of the callback function with data parameters, in The client just happens to be executed dynamically!).

Implementation of JSONP in jQuery:

jQuery provides two methods to achieve: $.getJSON () and $.ajax (), commonly used is the underlying $.ajax () method!

1.$.getJSON()：

$.getJSON(url?jsoncallback=?,data,fn(data){…})

The key point: add the parameter jsoncallback=? after the url, and return a randomly named callback function in the background! It will be automatically replaced by the name of the callback method by Jquery!

1 <script type="text/javascript">
2  $.getJSON("http://localhost:3856/GetItemCates.ashx/GetItemCats?gateid=20&format=json&jsoncallback=?", function (data) { 
3  var myprops = data.itemcats_get_response.item_cats.item_cat;
4             $.each(myprops, function (index, item) { $("ul").append("<li>" + item.name + "," + item.cid + "</li>") });
5         }
6 
7         );
8 </script>

2. $.ajax():

$.ajax({
url: url,
data: data,
dataType : “jsonp”,
jsonp: “jsoncallback”,
jsonpCallback:”success_jsonpCallback”,
success: callback
});

1  $.ajax({
 2       type : "get", // jquey does not support post mode cross-domain 
3       async: false ,
 4       url : "http://api.taobao.com/apitools/ajax_props.do", // URL of cross-domain request 
5       dataType : "jsonp", // The parameter name passed to the request handler to get the jsonp callback function name (default: callback) 
6       jsonp: "jsoncallback", // custom 
jsonp callback function name, the default is the       random function
       name automatically 
              generated by jQuery (json);
 10      }
11 });

The above jsonp and jsonpCallback can customize the callback function name and parameter name!

Notice:

Requires server-side support.
Only supports get requests

CORS cross-domain resource sharing (true cross-domain)

Cross-Origin Resource Sharing (CORS) is a web browser specification that defines a way for web servers to allow web pages to access their resources from different domains. CORS was born to allow AJAX to achieve controllable cross-domain access

CORS vs JSONP:

JSONP can only implement GET requests, while CORS supports all types of HTTP requests.
With CORS, developers can use normal XMLHttpRequest to make requests and get data, with better error handling than JSONP.
JSONP is mainly supported by older browsers, but they often do not support CORS, while most modern browsers already support CORS

Reference: AJAX Cross-Origin Request and CORS Cross-Origin Resource Sharing

Configure under webapp/WEB-INF/web.xml:

 1 <filter>
 2       <filter-name>CorsFilter</filter-name>
 3       <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
 4       <init-param>
 5         <param-name>cors.allowed.methods</param-name>
 6         <param-value>GET,POST,HEAD,OPTIONS,PUT,DELETE</param-value>
 7       </init-param>
 8       <init-param>
 9         <param-name>cors.allowed.headers</param-name>
10         <param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,deviceName,deviceID,gctk,eptk,customerNo,userID</param-value>
11       </init-param>
12       <async-supported>true</async-supported>
13     </filter>
14     <filter-mapping>
15       <filter-name>CorsFilter</filter-name>
16       <url-pattern>/*</url-pattern>
17     </filter-mapping>

　　Note: <async-supported>true</async-supported> is the new asynchronous processing tag of Servlet3.0

　　　　Portal: Detailed Explanation of New Features of Servlet 3.0

connect:

Cross-Origin Resource Sharing (CORS) Problem Solution

Spring boot solution

CORS cross-domain implementation ideas and related solutions