如何實現跨域?


跨域:當瀏覽器執行腳本時會檢查是否同源,只有同源的腳本才會執行,如果不同源即為跨域。

  • 這里的同源指訪問的協議、域名、端口都相同。
  • 同源策略是由 Netscape 提出的著名安全策略,是瀏覽器最核心、基本的安全功能,它限制了一個源中加載腳本與來自其他源中資源的交互方式。
  • Ajax 發起的跨域 HTTP 請求,結果被瀏覽器攔截,同時 Ajax 請求不能攜帶與本網站不同源的 Cookie。
  • script、img、iframe、link、video、audio 等帶有 src 屬性的標簽可以從不同的域加載和執行資源。 

 

如當使用 ajax 提交非同源的請求時,瀏覽器就會阻止請求。提示
Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

如何實現跨域請求呢?

1、jsonp
利用了 script 不受同源策略的限制
缺點:只能 get 方式,易受到 XSS攻擊

 

2、CORS(Cross-Origin Resource Sharing),跨域資源共享
當使用XMLHttpRequest發送請求時,如果瀏覽器發現違反了同源策略就會自動加上一個請求頭 origin;
后端在接受到請求后確定響應后會在后端在接受到請求后確定響應后會在 Response Headers 中加入一個屬性 Access-Control-Allow-Origin;
瀏覽器判斷響應中的 Access-Control-Allow-Origin 值是否和當前的地址相同,匹配成功后才繼續響應處理,否則報錯
缺點:忽略 cookie,瀏覽器版本有一定要求

 

3、代理跨域請求
前端向發送請求,經過代理,請求需要的服務器資源
缺點:需要額外的代理服務器

 

4、Html5 postMessage 方法
允許來自不同源的腳本采用異步方式進行有限的通信,可以實現跨文本、多窗口、跨域消息傳遞
缺點:瀏覽器版本要求,部分瀏覽器要配置放開跨域限制

 

5、修改 document.domain 跨子域
相同主域名下的不同子域名資源,設置 document.domain 為 相同的一級域名
缺點:同一一級域名;相同協議;相同端口

 

6、基於 Html5 websocket 協議
websocket 是 Html5 一種新的協議,基於該協議可以做到瀏覽器與服務器全雙工通信,允許跨域請求
缺點:瀏覽器一定版本要求,服務器需要支持 websocket 協議

 

7、document.xxx + iframe
通過 iframe 是瀏覽器非同源標簽,加載內容中轉,傳到當前頁面的屬性中
缺點:頁面的屬性值有大小限制


原文鏈接
 


 

 


免責聲明!

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



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