跨域，指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript施加的安全限制。
ajax本身實際上是通過XMLHttpRequest對象來進行數據的交互，而瀏覽器出于安全考慮，不允許js代碼進行跨域操作，所以會警告。
全稱：Cross-Origin Resource Sharing
中文意思：跨域資源共享
它在維基百科上的定義是：跨域資源共享（CORS ）是一種網絡瀏覽器的技術規范，它為Web服務器定義了一種方式，允許網頁從不同的域訪問其資源。而這種訪問是被同源策略所禁止的。CORS系統定義了一種瀏覽器和服務器交互的方式來確定是否允許跨域請求。 它是一個妥協，有更大的靈活性，但比起簡單地允許所有這些的要求來說更加安全。
1、通過Maven引用
cors-filter、<span style="font-family: Arial, Helvetica, sans-serif;">java-property-utils二個jar包，修改pom.xml文件，加入下面內容</span>
|
1
2
3
4
5
6
7
8
9
10
11
|
<!-- 跨域問題 --> <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里面配置過濾器，使用引入的jar中定義好的過濾器。注意修改cors.allowOrigin節點，如果允許所有站點跨域訪問，可以修改為[*],如果是多個站點，可以用[,]分隔配置。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!-- 跨域問題 --> <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> |
3、通過jQuery跨域調用數據,實例代碼如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!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 () { $('#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 () { //這是關鍵 獲取原生的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> |
以上就是是小編分享給大家的Javaweb使用cors完成跨域ajax數據交互的全部內容，希望對大家有所幫助。如果在閱讀過程中有什么問題，可以給小編留言，我會及時回復大家的。也希望大家多多支持服務器之家！
原文鏈接：http://blog.csdn.net/nnsword/article/details/53905592
