Javaweb使用cors完成跨域ajax數(shù)據(jù)交互

更新時(shí)間：2017年09月19日 15:32:48 作者：nnsword

本文由跨域、cors的概念開(kāi)始，進(jìn)而向大家介紹了Javaweb使用cors完成跨域ajax數(shù)據(jù)交互的相關(guān)內(nèi)容，需要的朋友可以了解下。

跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對(duì)JavaScript施加的安全限制。

ajax本身實(shí)際上是通過(guò)XMLHttpRequest對(duì)象來(lái)進(jìn)行數(shù)據(jù)的交互，而瀏覽器出于安全考慮，不允許js代碼進(jìn)行跨域操作，所以會(huì)警告。

cors

全稱：Cross-Origin Resource Sharing

中文意思：跨域資源共享

它在維基百科上的定義是：跨域資源共享（CORS ）是一種網(wǎng)絡(luò)瀏覽器的技術(shù)規(guī)范，它為Web服務(wù)器定義了一種方式，允許網(wǎng)頁(yè)從不同的域訪問(wèn)其資源。而這種訪問(wèn)是被同源策略所禁止的。CORS系統(tǒng)定義了一種瀏覽器和服務(wù)器交互的方式來(lái)確定是否允許跨域請(qǐng)求。它是一個(gè)妥協(xié)，有更大的靈活性，但比起簡(jiǎn)單地允許所有這些的要求來(lái)說(shuō)更加安全。

1、通過(guò)Maven引用

cors-filter、<span style="font-family: Arial, Helvetica, sans-serif;">java-property-utils二個(gè)jar包，修改pom.xml文件，加入下面內(nèi)容</span>

<!-- 跨域問(wèn)題 --> 
  <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>

2、在web.xml里面配置過(guò)濾器，使用引入的jar中定義好的過(guò)濾器。注意修改cors.allowOrigin節(jié)點(diǎn)，如果允許所有站點(diǎn)跨域訪問(wèn)，可以修改為[*],如果是多個(gè)站點(diǎn)，可以用[,]分隔配置。

<!-- 跨域問(wèn)題 --> 
  <filter> 
  <description>跨域過(guò)濾器</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>

3、通過(guò)jQuery跨域調(diào)用數(shù)據(jù),實(shí)例代碼如下:

<!DOCTYPE html> 
<html lang="en" xmlns="https://www.w3.org/1999/xhtml"> 
<head> 
 <meta charset="utf-8" /> 
 <title>跨域測(cè)試</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">跨域調(diào)用</button> 
 <p id="p_show"></p> 
 <script src="jquery-1.8.3.min.js" type="text/javascript"></script> 
 <script type="text/javascript"> 
  $(function () { 
   $('#btn_test').click(function () { 
    //alert('dddd'); 
    //var iframe_main = $("#iframe_main").contents(); 
    //iframe_main.find("#account").val('test'); 
    $.ajax({ 
     url: "https://10.18.25.119:8480/jxfp/index.jsp", 
     type: "GET", 
     dataType: "text", 
     timeout: 10000, 
     xhr: function () {  //這是關(guān)鍵 獲取原生的xhr對(duì)象 做以前做的所有事情 
      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>

以上就是是小編分享給大家的Javaweb使用cors完成跨域ajax數(shù)據(jù)交互的全部?jī)?nèi)容，希望對(duì)大家有所幫助。如果在閱讀過(guò)程中有什么問(wèn)題，可以給小編留言，我會(huì)及時(shí)回復(fù)大家的。也希望大家多多支持腳本之家！

您可能感興趣的文章: