Maven Web項目解決跨域問題

跨域問題目前筆者所用到的方案大致有三種:jsonp,SpringMVC 4以上注解方式和cros三方過濾器。

Jsonp

JSONP(JSON with Padding)是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。

Jsonp原理： 
首先在客戶端注冊一個callback, 然后把callback的名字傳給服務器。

此時，服務器先生成 json 數據。 
然后以 javascript 語法的方式，生成一個function , function 名字就是傳遞上來的參數 jsonp.

最后將 json 數據直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。

客戶端瀏覽器，解析script標簽，並執行返回的 javascript 文檔，此時數據作為參數，傳入到了客戶端預先定義好的 callback 函數里.（動態執行回調函數）

使用JSON的優點在於： 
比XML輕了很多，沒有那么多冗余的東西。 
JSON也是具有很好的可讀性的，但是通常返回的都是壓縮過后的。不像XML這樣的瀏覽器可以直接顯示，瀏覽器對於JSON的格式化的顯示就需要借助一些插件了。 
在JavaScript中處理JSON很簡單。 
其他語言例如PHP對於JSON的支持也不錯。

JSON也有一些劣勢： 
JSON在服務端語言的支持不像XML那么廣泛，不過JSON.org上提供很多語言的庫。 
如果你使用eval()來解析的話，會容易出現安全問題。 
只支持GET方式的請求方式不支持POST，導致如果是非常復雜的參數傳遞會造成參數丟失，因為GET方式只能在URL后面拼接參數，而且限制只能是： 
在IE8 下的URL地址總長度為：4076，超過該長度會自動忽略后面的內容； 
在firefox 25下的URL地址總長度可以達到:7530，超過該長度會訪問錯誤；

在chrome 29.0.1547.62 的最大總長度達到:7675，超過該長度會訪問錯誤；

 

2. 使用Cros三方方式（我用這種）

（1）pom.xml添加依賴

<!-- 跨域支持-->  
        <dependency>  
            <groupId>com.thetransactioncompany</groupId>  
            <artifactId>cors-filter</artifactId>  
            <version>2.5</version>  
        </dependency> 

（2）web.xml添加三方過濾器

<!--  提供跨域支持 -->
    <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> 

參數講解

cors.allowOrigin指的可以通過的ip，代表所有，可以使用指定的ip，多個的話可以用逗號分隔，默認為 
cors.supportedMethods指的是請求方式 默認為* 
cors.supportedHeaders請求支持的頭信息，默認為* 
cors.exposedHeaders暴露的頭信息，默認的empy list 
cors.supportsCredentials支持證書，默認為true 
cors.maxAge 最大過期時間，默認為-1 
cors.tagRequests 默認為false 
cors.allowSubdomains允許子域 默認為false