由于ajax本身實際上是通過XMLHttpRequest對象來進行數據的交互，而瀏覽器出于安全考慮，不允許js代碼進行跨域操作，所以會警告
網站開發，在某些情況下需要用到跨域。
什么是跨域？
跨域，指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript施加的安全限制。
ajax本身實際上是通過XMLHttpRequest對象來進行數據的交互，而瀏覽器出于安全考慮，不允許js代碼進行跨域操作，所以會警告。
常見解決跨域的方式
- script標簽
- iframe
- jsonp
- 服務端中轉請求
- cors
今天的主角cors
全稱：Cross-Origin Resource Sharing
中文意思：跨域資源共享
它在維基百科上的定義是：跨域資源共享（CORS ）是一種網絡瀏覽器的技術規范，它為Web服務器定義了一種方式，允許網頁從不同的域訪問其資源。而這種訪問是被同源策略所禁止的。CORS系統定義了一種瀏覽器和服務器交互的方式來確定是否允許跨域請求。 它是一個妥協，有更大的靈活性，但比起簡單地允許所有這些的要求來說更加安全。
下面就說一下cors在java tomcat下如何配置
首先下載jar包
cors-filter與java-property-utils
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
|
<!-- https://mvnrepository.com/artifact/com.thetransactioncompany/cors-filter --><dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>cors-filter</artifactId> <version>2.5</version></dependency><!-- https://mvnrepository.com/artifact/com.thetransactioncompany/java-property-utils --><dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>java-property-utils</artifactId> <version>1.10</version></dependency> |
修改web.xml
增加以下代碼（最好放在其他filter前邊）
|
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
|
<filter> <filter-name>CORS</filter-name> <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> <init-param> <param-name>cors.allowOrigin</param-name> <param-value>*</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> |
jQuery請求示例
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$.ajax("url", { type: "POST", xhrFields: { withCredentials: true, useDefaultXhrHeader: false }, data: { type: "test" }, dataType: 'json', crossDomain: true, success: function(data, status, xhr) { console.log(data); }}); |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：http://www.cnblogs.com/xiaokai0712/p/6796187.html
