碼上快樂

相關內容    簡體    繁體

詳解 CORS跨域的幾種不同實現方式

本文轉載自   查看原文   2019-03-27 09:25   2983    JSONP/CORS跨域請求/ 分布式/集群/並發

CORS 定義

CORS是一個W3C標准，全稱是"跨域資源共享"（Cross-origin resource sharing），它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。提供了 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直接請求普通文件存在跨域無權限訪問的問題

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

CORS，BROWSER支持情況

數據來源：caniuse.com

IE6,IE7,Opera min 不支持CORS。具體可參看數據來源中的 'show all'

主要用途

  • From a browser script perspective: By allowing cross-domain requests, which are subject to tighter controls on the types of data that is exchanged. Cookies, for instance, are blocked unless specifically requested by the XHR author and allowed by the cross-domain web service. This is done to mitigate the risk of data leaks.
  • From a web service perspective: By utilising the origin URL reported by the browser the target cross-domain web service can determine, based on its origin policy, whether to allow or deny the request.
  • 從瀏覽器腳本的角度來看：通過允許跨域請求，對交換的數據類型進行更嚴格的控制。例如，除非XHR作者特別要求並且跨域Web服務允許，否則將阻止cookie。這樣做是為了降低數據泄漏的風險。
  • 從Web服務的角度來看：通過使用瀏覽器報告的源URL，目標跨域Web服務可以根據其源策略確定是否允許或拒絕請求。

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，卻是另一個問題了，這里提下一些思路：

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

例如

{

  '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,目前也就兩個可以用

這兩個也都大同小異，因為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>

總結

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

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

本文轉載自路徑：http://www.cnblogs.com/sloong/p/cors.html


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 什么是跨域,為什么瀏覽器會禁止跨域，以及實現跨域的幾種方式 關於跨域,以及跨域的幾種方式 利用CORS實現跨域請求--轉 Java利用cors實現跨域請求 Java實現CORS跨域請求 九、Spring Boot 優雅的實現CORS跨域 最完整的幾種跨域方式實現原理 跨域方式及其實現 【從零開始搭建自己的.NET Core Api框架】（五）由淺入深詳解CORS跨域機制並快速實現 SpringBoot：CORS處理跨域請求的三種方式
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM