Example analysis of how Javaweb uses cors to complete cross-domain ajax data interaction-javaTutorial-php.cn

Example analysis of how Javaweb uses cors to complete cross-domain ajax data interaction

黄舟

Release： 2017-09-20 10:13:44

Original

1514 people have browsed it

This article starts with the concepts of cross-domain and cors, and then introduces the relevant content of Javaweb using cors to complete cross-domain ajax data interaction. Friends who need it can learn more.

Cross-domain means that the browser cannot execute scripts from other websites. It is caused by the browser's Same Origin Policy, a security restriction imposed by the browser on JavaScript.

ajax itself actually interacts with data through the XMLHttpRequest object. However, for security reasons, the browser does not allow js code to perform cross-domain operations, so a warning will be issued.

cors

Full name: Cross-Origin Resource Sharing

Chinese meaning: Cross-origin resource sharing

Its definition on Wikipedia is: Cross-Origin Resource Sharing (CORS) is a technical specification for web browsers that defines a way for web servers to allow web pages to access their resources from different domains. This access is prohibited by the same-origin policy. The CORS system defines a way for browsers and servers to interact to determine whether cross-domain requests are allowed. It's a compromise that allows for more flexibility, but is more secure than simply allowing all of these requirements.

1. Reference through Maven

cors-filter、

<!-- 跨域问题 --> 
  <dependency> 
  <groupId>com.thetransactioncompany</groupId> 
  <artifactId>cors-filter</artifactId> 
  <version>2.5</version> 
 </dependency> 
 <dependency> 
  <groupId>com.thetransactioncompany</groupId> 
  <artifactId>java-property-utils</artifactId> 
  <version>1.10</version> 
 </dependency>

Copy after login

2. In web.xml Configure the filter inside and use the filter defined in the imported jar. Pay attention to modifying the cors.allowOrigin node. If cross-domain access is allowed for all sites, it can be modified to [*]. If there are multiple sites, the configuration can be separated by [,].

<!-- 跨域问题 --> 
  <filter> 
  <description>跨域过滤器</description> 
  <filter-name>CORS</filter-name> 
  <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> 
  <init-param> 
   <param-name>cors.allowOrigin</param-name> 
   <param-value>https://127.0.0.1:8380</param-value> 
  </init-param> 
  <init-param> 
   <param-name>cors.supportedMethods</param-name> 
   <param-value>GET, POST, HEAD, PUT, DELETE</param-value> 
  </init-param> 
  <init-param> 
   <param-name>cors.supportedHeaders</param-name> 
   <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value> 
  </init-param> 
  <init-param> 
   <param-name>cors.exposedHeaders</param-name> 
   <param-value>Set-Cookie</param-value> 
  </init-param> 
  <init-param> 
   <param-name>cors.supportsCredentials</param-name> 
   <param-value>true</param-value> 
  </init-param> 
 </filter> 
 <filter-mapping> 
  <filter-name>CORS</filter-name> 
  <url-pattern>/*</url-pattern> 
 </filter-mapping>

Copy after login

3. Call data across domains through jQuery. The example code is as follows:

<!DOCTYPE html> 
<html lang="en" xmlns="https://www.w3.org/1999/xhtml"> 
<head> 
 <meta charset="utf-8" /> 
 <title>跨域测试</title> 
 <style type="text/css"> 
  body{ 
   margin:0px auto 0px auto; 
  } 
  .p_container { 
   margin: 0px auto 0px auto; 
   width: 100%; 
   height: 200px; 
  } 
   .p_container > iframe { 
    width: 100%; 
    height: 100%; 
   } 
 </style> 
</head> 
<body> 
 <p> 
 </p> 
 <button id="btn_test">跨域调用</button> 
 <p id="p_show"></p> 
 <script src="jquery-1.8.3.min.js" type="text/javascript"></script> 
 <script type="text/javascript"> 
  $(function () { 
   $(&#39;#btn_test&#39;).click(function () { 
    //alert(&#39;dddd&#39;); 
    //var iframe_main = $("#iframe_main").contents(); 
    //iframe_main.find("#account").val(&#39;test&#39;); 
    $.ajax({ 
     url: "https://10.18.25.119:8480/jxfp/index.jsp", 
     type: "GET", 
     dataType: "text", 
     timeout: 10000, 
     xhr: function () {  //这是关键 获取原生的xhr对象 做以前做的所有事情 
      var xhr = jQuery.ajaxSettings.xhr(); 
      xhr.withCredentials = true; 
      return xhr; 
     },      
     success: function (data) { 
      $("#p_show").html(data); 
      //Console.log(data); 
     }, 
     error: function (e) { 
      $("#p_show").html(e.statusText); 
     } 
    }); 
   }); 
  }); 
 </script> 
</body> 
</html>

Copy after login

The above is the detailed content of Example analysis of how Javaweb uses cors to complete cross-domain ajax data interaction. For more information, please follow other related articles on the PHP Chinese website!