CORS 跨域實現思路及相關解決方案

本篇包括以下內容：

CORS 定義
CORS 對比 JSONP
CORS，BROWSER支持情況
主要用途
Ajax請求跨域資源的異常
CORS 實現思路
安全說明
CORS 幾種解決方案
    自定義CORSFilter
    Nginx 配置支持Ajax跨域
    支持多域名配置的CORS Filter

keyword:cors,跨域,ajax,403,filter,RESTful,origin,http,nginx,jsonp

CORS 定義

Cross-Origin Resource Sharing（CORS）跨來源資源共享是一份瀏覽器技術的規範，提供了 Web 服務從不同域傳來沙盒腳本的方法，以避開瀏覽器的同源策略，是 JSONP 模式的現代版。與 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以讓網頁設計師用一般的 XMLHttpRequest，這種方式的錯誤處理比 JSONP 要來的好。另一方面，JSONP 可以在不支持 CORS 的老舊瀏覽器上運作。現代的瀏覽器都支持 CORS。

CORS是W3c工作草案，它定義了在跨域訪問資源時瀏覽器和服務器之間如何通信。CORS背後的基本思想是使用自定義的HTTP頭部允許瀏覽器和服務器相互瞭解對方，從而決定請求或響應成功與否。W3C CORS 工作草案同源策略：是瀏覽器最核心也最基本的安全功能；同源指的是：同協議，同域名和同端口。精髓：認爲自任何站點裝載的信賴內容是不安全的。當被瀏覽器半信半疑的腳本運行在沙箱時，它們應該只被允許訪問來自同一站點的資源，而不是那些來自其它站點可能懷有惡意的資源；參考:JavaScript 的同源策略；

JSON & JSONP:JSON 是一種基於文本的數據交換方式，或者叫做數據描述格式。JSONP是資料格式JSON的一種“使用模式”，可以讓網頁從別的網域要資料，由於同源策略，一般來說位於server1.example.com的網頁無法與不是 server1.example.com的服務器溝通，而HTML的script元素是一個例外。利用script元素的這個開放策略，網頁可以得到從其他來源動態產生的JSON資料，而這種使用模式就是所謂的JSONP

CORS 對比 JSONP

都能解決 Ajax直接請求普通文件存在跨域無權限訪問的問題

JSONP只能實現GET請求，而CORS支持所有類型的HTTP請求，使用CORS，開發者可以使用普通的XMLHttpRequest發起請求和獲得數據，比起JSONP有更好的錯誤處理 JSONP主要被老的瀏覽器支持，它們往往不支持CORS，而絕大多數現代瀏覽器都已經支持了CORS

CORS，BROWSER支持情況

數據來源：caniuse.com

IE6,IE7,Opera min 不支持CORS。

Ajax請求跨域資源的異常

當出現如下異常時，那麼就需要考慮跨域的問題了例如 localhost:63343 通過Ajax請求http://192.168.10.61:8080服務器資源時就會出現如下異常：

CORS 實現思路

CORS背後的基本思想是使用自定義的HTTP頭部允許瀏覽器和服務器相互瞭解對方，從而決定請求或響應成功與否安全說明

CORS is not about providing server-side security. The Origin request header is produced by the browser and the server has no direct means to verify it.

CORS 並不是爲了解決服務端安全問題，而是爲了解決如何跨域調用資源。至於如何設計出安全的開放API，卻是另一個問題了，這裏提下一些思路：

請求時間有效性（驗證timestamp與服務接到請求的時間相差是否在指定範圍內，比如5分鐘內） token驗證 ip驗證來源驗證

例如

    {
        'name': 用戶名,
        ‘key: 加密的驗證key,//(name+secret+timestamp來通過不可逆加密生成)
        ‘timestamp’: 時間戳,//驗證timestamp與服務接到請求的時間相差是否在指定範圍內，比如5分鐘內
    }

CORS 幾種解決方案

CORS背後的基本思想是使用自定義的HTTP頭部允許瀏覽器和服務器相互瞭解對方，從而決定請求或響應成功與否.

Access-Control-Allow-Origin:指定授權訪問的域
Access-Control-Allow-Methods：授權請求的方法（GET, POST, PUT, DELETE，OPTIONS等)

一：簡單的自定義CORSFilter / Interceptor

適合設置單一的（或全部）授權訪問域，所有配置都是固定的，特簡單。也沒根據請求的類型做不同的處理

在web.xml 中添加filter

<filter>
    <filter-name>cros</filter-name>
    <filter-class>cn.ifengkou.test.filter.CORSFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>cros</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

新增CORSFilter 類

@Component
public class CORSFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        response.addHeader("Access-Control-Allow-Headers", "Content-Type");
        response.addHeader("Access-Control-Max-Age", "1800");//30 min
        filterChain.doFilter(request, response);
    }
}

Access-Control-Allow-Origin只能配置 或者一個域名*
比如配置了192.168.56.130，那麼只有192.168.56.130 能拿到數據，否則全部報403異常

response.addHeader("Access-Control-Allow-Origin", "http://192.168.56.130");

二：Nginx 配置支持Ajax跨域

這裏是一個nginx啓用COSR的參考配置：來源

#
# Wide-open CORS config for nginx
#
location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
}

三：支持多域名配置的CORS Filter

因爲知道已經有可以用的庫可以解決，所以就沒重複造輪子了。其實因爲懶，看看別人的源碼算了。。。

在mvnrepository搜索cors-filter,目前也就兩個可以用

org.ebaysf.web 的 cors-filter,項目地址：https://github.com/ebay/cors-filter

com.thetransactioncompany的 cors-filter，項目地址：http://software.dzhuvinov.com/cors-filter.html

這兩個也都大同小異，因爲ebay開源在github上，也有詳細的README，那麼就以ebay的cors-filter爲例配置

添加依賴包到項目：

<dependency>
    <groupId>org.ebaysf.web</groupId>
    <artifactId>cors-filter</artifactId>
    <version>1.0.1</version>
</dependency>

添加配置(具體配置項，還是見項目的README.md吧）

  <filter>
    <filter-name>CORS Filter</filter-name>
    <filter-class>org.ebaysf.web.cors.CORSFilter</filter-class>
    <init-param>
      <param-name>cors.allowed.origins</param-name>
      <param-value>http://192.168.56.129,http://192.168.56.130</param-value>
    </init-param>
    <init-param>
      <param-name>cors.allowed.methods</param-name>
      <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
    </init-param>
    <init-param>
      <param-name>cors.allowed.headers</param-name>
      <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CORS Filter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

源碼分析

源碼地址：github。但通過IDEA Decompiled 出來的更清晰.....,以下是反編譯的

ebaysf的cors-filter 只有一個類CORSFilter。也就是一個攔截器，implements Filter

public final class CORSFilter implements Filter {

通過是實現Filter 的init 方法從配置文件中讀取參數：

public void init(FilterConfig filterConfig) throws ServletException {
    this.parseAndStore("*", "GET,POST,HEAD,OPTIONS", "Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers", "", "true", "1800", "false", "true");
    this.filterConfig = filterConfig;
    this.loggingEnabled = false;
    if(filterConfig != null) {
        String configAllowedOrigins = filterConfig.getInitParameter("cors.allowed.origins");
        String configAllowedHttpMethods = filterConfig.getInitParameter("cors.allowed.methods");
        String configAllowedHttpHeaders = filterConfig.getInitParameter("cors.allowed.headers");
        String configExposedHeaders = filterConfig.getInitParameter("cors.exposed.headers");
        String configSupportsCredentials = filterConfig.getInitParameter("cors.support.credentials");
        String configPreflightMaxAge = filterConfig.getInitParameter("cors.preflight.maxage");
        String configLoggingEnabled = filterConfig.getInitParameter("cors.logging.enabled");
        String configDecorateRequest = filterConfig.getInitParameter("cors.request.decorate");
        this.parseAndStore(configAllowedOrigins, configAllowedHttpMethods, configAllowedHttpHeaders, configExposedHeaders, configSupportsCredentials, configPreflightMaxAge, configLoggingEnabled, configDecorateRequest);
    }
}

parseAndStore 方法，解析參數。以解析cors.allowed.orgins爲例；其他參數同理

    Set e;
    if(allowedOrigins != null) {
        if(allowedOrigins.trim().equals("*")) {
            this.anyOriginAllowed = true;
        } else {
            this.anyOriginAllowed = false;
            e = this.parseStringToSet(allowedOrigins);
            this.allowedOrigins.clear();
            this.allowedOrigins.addAll(e);
        }
    }
//parseStringToSet
//對多域名用點分割，加到HashSet中，再賦給allowedOrigins（Collection<String> allowedOrigins = new HashSet();）
private Set<String> parseStringToSet(String data) {
    String[] splits;
    if(data != null && data.length() > 0) {
        splits = data.split(",");
    } else {
        splits = new String[0];
    }

    HashSet set = new HashSet();
    if(splits.length > 0) {
        String[] arr$ = splits;
        int len$ = splits.length;

        for(int i$ = 0; i$ < len$; ++i$) {
            String split = arr$[i$];
            set.add(split.trim());
        }
    }

    return set;
}

如何實現 doFilter

public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    if(servletRequest instanceof HttpServletRequest && servletResponse instanceof HttpServletResponse) {
        HttpServletRequest request1 = (HttpServletRequest)servletRequest;
        HttpServletResponse response = (HttpServletResponse)servletResponse;
        //識別request 屬於哪種類別
        CORSFilter.CORSRequestType requestType = this.checkRequestType(request1);
        if(this.decorateRequest) {
            decorateCORSProperties(request1, requestType);
        }

        switch(CORSFilter.SyntheticClass_1.$SwitchMap$org$ebaysf$web$cors$CORSFilter$CORSRequestType[requestType.ordinal()]) {
        case 1:
            this.handleSimpleCORS(request1, response, filterChain);
            break;
        case 2:
            this.handleSimpleCORS(request1, response, filterChain);
            break;
        case 3:
            this.handlePreflightCORS(request1, response, filterChain);
            break;
        case 4:
            this.handleNonCORS(request1, response, filterChain);
            break;
        default:
            this.handleInvalidCORS(request1, response, filterChain);
        }

    } else {
        String request = "CORS doesn\'t support non-HTTP request or response.";
        throw new ServletException(request);
    }
}

判斷request類別，根據類別進行差異化處理。handleSimpleCORS 處理過程，判斷是否設置允許所有origin參數，判斷是否符合httpMethods要求，判斷此次request的origin（origin = request.getHeader("Origin")）是否在allowedOrigins（origin白名單）內。如果在，就設置response.addHeader("Access-Control-Allow-Origin", origin);這樣也就實現了多域名支持。流程圖就不畫了...

public void handleSimpleCORS(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws IOException, ServletException {
        CORSFilter.CORSRequestType requestType = this.checkRequestType(request);
        String origin;
        if(requestType != CORSFilter.CORSRequestType.SIMPLE && requestType != CORSFilter.CORSRequestType.ACTUAL) {
            origin = "Expects a HttpServletRequest object of type " + CORSFilter.CORSRequestType.SIMPLE + " or " + CORSFilter.CORSRequestType.ACTUAL;
            throw new IllegalArgumentException(origin);
        } else {
            origin = request.getHeader("Origin");
            String method = request.getMethod();
            if(!this.isOriginAllowed(origin)) {
                this.handleInvalidCORS(request, response, filterChain);
            } else if(!this.allowedHttpMethods.contains(method)) {
                this.handleInvalidCORS(request, response, filterChain);
            } else {
                if(this.anyOriginAllowed && !this.supportsCredentials) {
                    response.addHeader("Access-Control-Allow-Origin", "*");
                } else {
                    response.addHeader("Access-Control-Allow-Origin", origin);
                }

                if(this.supportsCredentials) {
                    response.addHeader("Access-Control-Allow-Credentials", "true");
                }

                if(this.exposedHeaders != null && this.exposedHeaders.size() > 0) {
                    String exposedHeadersString = join(this.exposedHeaders, ",");
                    response.addHeader("Access-Control-Expose-Headers", exposedHeadersString);
                }

                filterChain.doFilter(request, response);
            }
        }
    }

測試：

1.服務端準備接口（我的地址是：http://192.168.10.61:8080/api）

@RequestMapping(method = RequestMethod.GET,value = "test")
@ResponseBody
public HashMap<String,Object> getArticles(){
    HashMap<String,Object> map = new HashMap<>();
    map.put("result","success");
    return map;
}

2.過濾器配置(web.xml),配置允許訪問的域爲：http://192.168.56.129，http://www.website2.com

<filter>
    <filter-name>CORS Filter</filter-name>
    <filter-class>org.ebaysf.web.cors.CORSFilter</filter-class>
    <init-param>
      <param-name>cors.allowed.origins</param-name>
      <param-value>http://192.168.56.129,http://www.website2.com</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CORS Filter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

3.準備測試網頁index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cors test page</title>
    <script src="jquery.min.js"></script>
    <script>

        function loadData(){
            $.ajax({
                url: "http://192.168.10.61:8080/api",
                type:"GET",
                dataType:"json",
                timeout:10000,
                success:function(data){
                    $("#result").append(data.result+"<br />");
                    console.log(data);
                },
                error:function(e){
                    $("#result").append(e.statusText+"<br />");
                }
            });
        }
        $(function(){
            $("#host").append("origin:"+window.location.origin);
        });

    </script>
</head>
<body>
<button onclick="loadData()">onclick</button>
<div id="host"></div>
<div id="result" style="height:200px;width:100%"></div>
</body>
</html>

4.將index.html發佈到nginx（nginx後面也有方案）

index.html 不能直接用瀏覽器打開運行，雖然可以調用Ajax請求，但是域是file:///path/index.html

虛擬機增加一個網卡地址（原機器IP是192.168.56.129)

ifconfig eth0:0 192.168.56.130

建立兩個測試網站

cd home
mkdir /website1 #站點目錄
mkdir /website2

將index.html 傳輸到這兩個目錄

配置nginx，增加兩個server節點

# ----server1 ----
server {
    listen       192.168.56.129:80;
    server_name  www.website1.com;
    location / {
        root   /website1;
        index  index.html index.htm;
    }
}
# ----server2 ----
server {
    listen       192.168.56.130:80;
    server_name  www.website2.com;
    location / {
        root   /website2;
        index  index.html index.htm;
    }
}

重啓nginx服務

./nginx -s reload

5.修改本地hosts文件

//hosts文件路徑：windows系統一般在C:\Windows\System32\drivers\etc 192.168.56.129 www.website1.com 192.168.56.130 www.website2.com

通過增加虛擬網卡、nginx代理和修改hosts文件，我在本地就有4個網站(域）可以進行測試了，分別是:

    http://192.168.56.129
    http://192.168.56.130
    http://www.website1.com
    http://www.website2.com

總結

cors在開發WebService、RESTful API 時經常會遇到，在以前可能直接通過jsonp解決，jsonp怎樣怎樣就不多說了。總之，CORS技術規範出來這麼久了，如果不考慮IE6 IE7的問題，那麼還是積極擁抱CORS吧

上文三種解決方案，通過搜索引擎均能找到，但估計大部分都是用的第一種最簡單的無腦的Cors Filter處理，第二種方案是通過nginx配置的，並不適合所有Web應用。第三種，考慮得很周全，而且使用方便，如果不考慮造重複輪子，推薦使用。

本文所用的測試工程代碼太簡單了，就不放github了，直接下載吧，項目下載地址```

CORS 跨域實現思路及相關解決方案

org.ebaysf.web 的 cors-filter,項目地址：https://github.com/ebay/cors-filter

com.thetransactioncompany的 cors-filter，項目地址：http://software.dzhuvinov.com/cors-filter.html

微服務實踐k8s&dapr開發部署實驗（2）狀態管理

Win10 LTSC 2019 安裝後的一些步驟

Python 潮流週刊#52：Python 處理 Excel 的資源

CORS 跨域實現思路及相關解決方案

js 數組方法(全）

從零開始 2，react -快速上手

react入門第一步-基礎api

javascript 生成一個一億長度的隨機數組，從中排列出最大的1000個項；

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

CORS 跨域 實現思路及相關解決方案

org.ebaysf.web 的 cors-filter,項目地址：https://github.com/ebay/cors-filter

com.thetransactioncompany的 cors-filter，項目地址：http://software.dzhuvinov.com/cors-filter.html

CORS 跨域實現思路及相關解決方案