前端跨域的幾種方式


  在實際開發中,前端和后端之所以存在跨域的問題,主要是受到了 “同源策略”的限制,“同源”一般是指: 協議、域名(主域名以及子域名)和端口號三者相同,三者中的任何一個不相同都算作是跨域,不同域之間的相互請求資源就算作是跨域,這樣都是會被限制的;之所以設置同源策略的限制主要是為了避免瀏覽器受到xss、CSFR等的攻擊;同源策略限制的內容有: Cookie、LocalStorage、IndexdDB等存儲數據,Dom節點,AJAX請求發送后,被瀏覽器的攔截;但是,img標簽中的src、link中的href以及script中的src是允許跨域加載資源的;

 

  需要注意的是,如果是協議和端口造成的跨域問題,前端是無能為力的,只能通過服務器的配置來解決;其次,在跨域問題上,僅僅是通過“url的首部”來識別而不會根據域名對應的IP地址來判斷,也就是根據域名,協議,端口來判斷; 

 

  跨域並不是請求發布出去,請求是能發出去的,服務器是能夠收到請求並且正常的返回結果的,只是結果被瀏覽器給攔截了;

  

跨域的解決方案

  1、jsonp原理

    利用script標簽沒有跨域限制的漏洞,網頁可以得到從其他源動態產生的json數據。 JSONP請求一定需要對方的服務器做支持才可以;JSONP主要是通過聲明一個回調函數,然后利用script的src屬性后邊跟上 ?callback=聲明的回調函數,來進行數據處理,使用起來非常的簡單和方便,而且可用於解決主流瀏覽器的跨域數據訪問問題;但是,它僅僅只是支持get方法,具有一定的局限性,而且不安全,容易受到xss攻擊;

  2、cors 

    cors需要瀏覽器和后端同時支持。IE8和IE9需要通過XDomainReauest來進行實現;

    其實瀏覽器本身是會自動的進行cors通信的,因此,實現cors通信的關鍵是后端,后端需要對請求頭的配置,也就是 Access-Control-Allow-Origin的配置,只要后端實現了cors,那么跨域的問題就解決了;

  3、nginx反向代理

    nginx反向代理跨域的實現原理主要是利用了服務器之間不存在跨域來進行實現的,類似於我們構建的node 本地服務器進行跨域; nginx反向代理的實現就是,通過nginx 配置一個代理服務器(域名與domain1相同,端口不同)作為跳板機,反向代理訪問domain2的接口,並且可以順便修改cookie中的domain信息,便於當前域的寫入,進而來實現跨域登錄;

  4、node 服務器作為中間代理進行跨域

    同源策略是瀏覽器需要遵循的標准,而如果是服務器向服務器請求就無需遵循同源策略;

  5、postMessage

    postMessage是 HTML5 XMLHttpRequest Level2 中的api,而且是為數不多可以跨域操作的 window 屬性之一,它可用於解決以下方面的問題,(1)頁面和其他打開的新窗口的數據傳遞; (2)多窗口之間的消息傳遞; (3)頁面與嵌入的iframe消息傳遞;   postMessage()方法允許來自不同源的腳本采用異步方式進行有限的通信,可以實現跨文本檔、多窗口、跨域消息傳遞;

 

  6、websockrt 

  7、window.name + iframe

  8、location.hash + iframe

  9、document.domain + iframe


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM