服務器實現跨域

1、CORS概述

跨源資源共享標準經過新增一系列 HTTP 頭，讓服務器能聲明那些來源能夠經過瀏覽器訪問該服務器上的各種資源（包括CSS、圖片、JavaScript 腳本以及其它類資源）。另外，對那些會對服務器數據形成破壞性影響的 HTTP 請求方法（特別是 GET 之外的 HTTP 方法，或者搭配某些MIME類型的POST請求），標準強烈要求瀏覽器必須先以 OPTIONS 請求方式發送一個預請求(preflight request)，從而獲知服務器端對跨源請求所支持 HTTP 方法。在確認服務器容許該跨源請求的狀況下，以實際的 HTTP 請求方法發送那個真正的請求。服務器端也能夠通知客戶端，是否是須要隨同請求一塊兒發送信用信息（包括 Cookies 和 HTTP 認證相關數據）。

2、CORS原理

例如：域名A(http://a.example)的某 Web 應用程序中經過<img>標籤引入了域名B(http://b.foo)站點的某圖片資源(http://b.foo/image.jpg)。這就是一個跨域請求，請求http報頭包含Origin: http://a.example，若是返回的http報頭包含響應頭 Access-Control-Allow-Origin: http://a.example （或者Access-Control-Allow-Origin: http://a.example），表示域名B接受域名B下的請求，那麼這個圖片就運行被加載。不然表示拒絕接受請求。

3、CORS跨域請求控制方法

 

1.http請求頭

 

Origin: 普通的HTTP請求也會帶有，在CORS中專門做爲Origin信息供後端比對,代表來源域。

Access-Control-Request-Method: 接下來請求的方法，例如PUT, DELETE等等

Access-Control-Request-Headers: 自定義的頭部，全部用setRequestHeader方法設置的頭部都將會以逗號隔開的形式包含在這個頭中

 

2.http響應頭

 

而後瀏覽器再根據服務器的返回值判斷是否發送非簡單請求。簡單請求前面講過是直接發送，只是多加一個origin字段代表跨域請求的來源。而後服務器處理完請求以後，會再返回結果中加上以下控制字段

Access-Control-Allow-Origin: 容許跨域訪問的域，能夠是一個域的列表，也能夠是通配符"*"。這裏要注意Origin規則只對域名有效，並不會對子目錄有效。即http://foo.example/subdir/ 是無效的。可是不一樣子域名須要分開設置，這裏的規則能夠參照同源策略

Access-Control-Allow-Credentials: 是否容許請求帶有驗證信息，

Access-Control-Expose-Headers: 容許腳本訪問的返回頭，請求成功後，腳本能夠在

Access-Control-Max-Age: 緩存這次請求的秒數。在這個時間範圍內，全部同類型的請求都將再也不發送預檢請求而是直接使用這次返回的頭做爲判斷依據，很是有用，大幅優化請求次數

Access-Control-Allow-Methods: 容許使用的請求方法，以逗號隔開

Access-Control-Allow-Headers: 容許自定義的頭部，以逗號隔開，大小寫不敏感

 

 

若是程序猿偷懶將Access-Control-Allow-Origin設置爲：Access-Control-Allow-Origin: * 容許任何來自任意域的跨域請求，那麼久存在被 DDoS攻擊的可能。

實現方式：

一、nginx配置文件配置：

server {    
    location / {    
        if ($request_method = 'OPTIONS') {    
          add_header 'Access-Control-Allow-Origin' '*';    
          add_header 'Access-Control-Allow-Credentials' 'true';    
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';    
          add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';    
         # add_header 'Access-Control-Max-Age' 3600;    
          add_header 'Content-Type' 'text/plain charset=UTF-8';    
          add_header 'Content-Length' 0;    
          return 200;    
        }    
}    

2.直接在tomcat安裝目錄下的lib中添加cors-filter-1.7.jar，java-property-utils-1.9.jar 這2個jar包，而且在業務項目的web.xml 中配置想要應的filter配置文件：

<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>

3.本身寫的  filter類，本身在在業務項目中配置web.xml 中配置想要的xml 文件。

如：java類filter：

public class CorsFilter implements Filter{  
   
@Override  
public void init(FilterConfig filterConfig) throws ServletException {  
// TODO Auto-generated method stub  
   
}  
   
@Override  
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException,  
ServletException {  
// TODO Auto-generated method stub  
HttpServletResponse res = (HttpServletResponse) response;  
res.setContentType("text/html;charset=UTF-8");  
   res.setHeader("Access-Control-Allow-Origin", "*");  
   res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
   res.setHeader("Access-Control-Max-Age", "0");  
   res.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");  
   res.setHeader("Access-Control-Allow-Credentials", "true");  
   res.setHeader("XDomainRequestAllowed","1");  
   chain.doFilter(request, response);  
}  
   
@Override  
public void destroy() {  
// TODO Auto-generated method stub  
   
}  
   
}

業務項目中的web.xml配置以下：

<filter>  
 <filter-name>cors</filter-name>  
 <filter-class>com.tianlong.common.base.CorsFilter</filter-class>  
</filter>  
<filter-mapping>  
 <filter-name>cors</filter-name>  
 <url-pattern>/*</url-pattern>  
</filter-mapping>