跨域問題

1、跨域是什么?

1)廣義的跨域:指一個域下的文檔或腳本試圖去請求另一個域下的資源。

??? a)資源跳轉: 鏈接、重定向、表單提交

??? b)資源嵌入:link,script,img等帶src屬性的標簽等

??? c)腳本請求: js發起的ajax請求、dom和js對象的跨域操作等

2)我們通常所說的跨域是狹義的,是由瀏覽器同源策略限制的。

??? a、同源策略/SOP(Same origin policy):同源是指“協議+域名+端口"三者相同,即便兩個不同的域名指向同一個ip地址,也非同源。(這是一種約定,由Netscape公司1995年引入瀏覽器,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到XSS、CSFR等攻擊。所謂)

??? b、同源策略限制以下幾種行為:

??????? 1.) Cookie、LocalStorage 和 IndexDB 無法讀取

??????? 2.) DOM 和 Js對象無法獲得

??????? 3.) AJAX 請求不能發送

??? c、常見跨域場景

2、跨域解決方案

1)通過JSONP跨域

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式,而JSONP(JSON with Padding)則是JSON 的一種“使用模式”,通過這種模式可以實現數據的跨域獲取。?

JSONP跨域的原理:在同源策略下,在某個服務器下的頁面是無法獲取到該服務器以外的數據的,但img、iframe、script等標簽是個例外,這些標簽可以通過src屬性請求到其他服務器上的數據。利用script標簽的開放策略,我們可以實現跨域請求數據,當然,也需要服務端的配合。當我們正常地請求一個JSON數據的時候,服務端返回的是一串JSON類型的數據,而我們使用JSONP模式來請求數據的時候,服務端返回的是一段可執行的JavaScript代碼。

在jQuery中如何通過JSONP來跨域獲取數據

??? a)在ajax函數中設置dataType為 'jsonp' :?

??? b、利用getJSON來實現,只要在地址中加上callback=?參數即可:?

2)document.domain + iframe跨域

3) location.hash + iframe

4) window.name + iframe跨域

5) postMessage跨域

6) 跨域資源共享(CORS)

7) nginx代理跨域

8) node.js中間件代理跨域

9) WebSocket協議跨域



參考:前端常見跨域解決方案(全) - inroam - 博客園

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1. 什么是跨域? 跨域一詞從字面意思看,就是跨域名嘛,但實際上跨域的范圍絕對不止那么狹隘。具體概念如下:只要協議...
    他在發呆閱讀 829評論 0 0
  • 1. 什么是跨域? 跨域一詞從字面意思看,就是跨域名嘛,但實際上跨域的范圍絕對不止那么狹隘。具體概念如下:只要協議...
    稍縱即逝_e5e9閱讀 199評論 0 0
  • 瀏覽器在請求不同域的資源時,會因為同源策略的影響請求不成功,這就是通常被提到的“跨域問題”。作為前端開發,解決跨域...
    SCQ000閱讀 2,584評論 1 52
  • 大家好,我是IT修真院鄭州分院第一期的學員胡嘉杰,一枚正直純潔善良的WEB前端程序員。 今天給大家分享一下,修真院...
    ithinker5閱讀 510評論 0 1
  • 跨域,是一個前端開發者必須掌握的概念,這篇文章就從幾個基本問題出發,來理解這個概念。 首先,什么是跨域?為何會有跨...
    阿追老師Jason閱讀 589評論 0 2