web開發中的跨域問題解決方法

1.跨域問題出現的原因:

同源策略/SOP(Same origin policy)是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到XSS、CSFR等攻擊。

SOP要求兩個通訊地址的協議域名端口號必須相同,否則兩個地址的通訊將被瀏覽器視爲不安全的,並被block下來。比如“http頁面”和“https頁面”屬於不同協議;“qq.com”、“www.qq.com”、“a.qq.com”都屬於不同域名(或主機);“a.com”和“a.com:8000”屬於不同端口號。這三種情況常規都是無法直接進行通訊的。

2.解決方法:目前業界流行的解決方案有三種:服務器代理、JSONP、CORS,接下來將分別介紹這三種方案。

(1)服務器代理:

頁面直接向同域的服務端發請求,服務端進行跨域處理或爬蟲後,再把數據返回給客戶端頁面。通過Nginx反向代理解決跨域問題是利用了服務端之間的資源請求不會有跨域限制的特點實現的,具體來說就是前端發起的請求被Nginx攔截,再由Nginx代由轉發請求到資源服務器請求資源。

(2)JSONP(JSON with Padding)

  JSONP是JSON的一種"使用模式",可以讓網頁從別的域名那獲取資料,即跨域讀取數據(只支持GET請求,不支持POST、PUT等其他類型的HTTP請求)。JSONP利用的是標籤可以跨域的特性,跨域URL返回的腳本不僅包含數據,還包含一個回調。jQuery已經提供了JSONP的使用

  JSONP的使用步驟:

  1. 首先在客戶端註冊一個callback, 然後把callback的名字傳給服務器。

  2. 服務器生成json數據以javascript語法生成一個function , 名字就是傳遞上來的參數callback。

  3. 最後將json 數據以入參的方式,放到function中,這樣就生成了一段js語法的文檔,返回給客戶端。

  4. 客戶端瀏覽器解析script標籤,並執行返回的 javascript 文檔,此時數據作爲參數,傳入到了客戶端預先定義好的 callback 函數裏.(動態執行回調函數)。

(3)CORS(跨域資源共享)

同域安全策略CORS(Cross-Origin Resource Sharing)是W3C在05年提出的跨域資源請求機制,它要求當前域(常規爲存放資源的服務器)在響應報頭添加Access-Control-Allow-Origin標籤,從而允許指定域的站點訪問當前域上的資源。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章