Web CORS 跨域方式使用方式

CORS 參考

http://enable-cors.org/index.html https://help.aliyun.com/document_detail/oss/practice/cors_guide.html

同源策略

跨域訪問，或者說JavaScript的跨域訪問問題，是瀏覽器出於安全考慮而設置的一個限制，即同源策略。當來自於A網站的頁面中的JavaScript代碼但願訪問B網站的時候，瀏覽器會拒絕該訪問，由於A，B兩個網站是屬於不一樣的域。

在實際應用中，常常會有跨域訪問的需求，好比用戶的網站www.a.com，後端使用了OSS。在網頁中提供了使用JavaScript實現的上傳功能，可是在該頁面中，只能向www.a.com發送請求，向其餘網站發送的請求都會被瀏覽器拒絕。這樣就致使用戶上傳的數據必須從www.a.com中轉。若是設置了跨域訪問的話，用戶就能夠直接上傳到OSS而無需從www.a.com中轉。

CORS介紹

跨域資源共享（Cross-Origin Resource Sharing），簡稱CORS，是HTML5提供的標準跨域解決方案，具體的CORS規則能夠參考W3C CORS規範。

CORS是一個由瀏覽器共同遵循的一套控制策略，經過HTTP的Header來進行交互。瀏覽器在識別到發起的請求是跨域請求的時候，會將Origin的Header加入HTTP請求發送給服務器，好比上面那個例子，Origin的Header就是www.a.com。服務器端接收到這個請求以後，會根據必定的規則判斷是否容許該來源域的請求，若是容許的話，服務器在返回的響應中會附帶上Access-Control-Allow-Origin這個Header，內容爲www.a.com來表示容許該次跨域訪問。若是服務器容許全部的跨域請求的話，將Access-Control-Allow-Origin的Header設置爲*便可，瀏覽器根據是否返回了對應的Header來決定該跨域請求是否成功，若是沒有附加對應的Header，瀏覽器將會攔截該請求。

以上描述的僅僅是簡單狀況，CORS規範將請求分爲兩種類型，一種是簡單請求，另一種是帶預檢的請求。預檢機制是一種保護機制，防止資源被原本沒有權限的請求修改。瀏覽器會在發送實際請求以前先發送一個OPTIONS的HTTP請求來判斷服務器是否能接受該跨域請求。若是不能接受的話，瀏覽器會直接阻止接下來實際請求的發生。

只有同時知足如下兩個條件纔不須要發送預檢請求：

請求方法是以下之一：

GET
HEAD
POST
全部的Header都在以下列表中：

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
預檢請求會附帶一些關於接下來的請求的信息給服務器，主要有如下幾種：

Origin：請求的源域信息
Access-Control-Request-Method：接下來的請求類型，如POST、GET等。
Access-Control-Request-Headers：接下來的請求中包含的用戶顯式設置的Header列表。
服務器端收到請求以後，會根據附帶的信息來判斷是否容許該跨域請求，信息返回一樣是經過Header完成的：

Access-Control-Allow-Origin：容許跨域的Origin列表
Access-Control-Allow-Methods：容許跨域的方法列表
Access-Control-Allow-Headers：容許跨域的Header列表
Access-Control-Expose-Headers：容許暴露給JavaScript代碼的Header列表。
Access-Control-Max-Age：最大的瀏覽器緩存時間，單位s。
瀏覽器會根據以上的返回信息綜合判斷是否繼續發送實際請求。固然，若是沒有這些Header瀏覽器會直接阻止接下來的請求。

這裏須要再次強調的一點是，以上行爲都是瀏覽器自動完成的，用戶無需關注這些細節。若是服務器配置正確，那麼和正常非跨域請求是同樣的。

 

 Java Web服務器配置

maven依賴

<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.5</version>
</dependency>

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>
    <init-param>
        <param-name>cors.maxAge</param-name>
        <param-value>3600</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>CORS</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

其餘跨域方案

document.domain方案,前提是必須是同一個基域名

iframe