1. 程式人生 > >JavaScript跨域問題之CORS方法與JSONP的對比

JavaScript跨域問題之CORS方法與JSONP的對比

什麼是跨域?
只要協議、域名、埠有任何一個不同,都會被當成不同的域。而JavaScript同源政策的限制,無法進行跨域呼叫

解決方法:
1.跨域資源共享(CORS):
定義了在訪問跨域資源時,瀏覽器與伺服器應該如何溝通。背後的基本思想就是使用自定義的HTTP頭部讓瀏覽器與伺服器進行溝通,從而決定請求或響應是應該成功還是失敗。
伺服器對於CORS的支援,主要通過設定Access-Controll-Allow-Origin來進行。如果瀏覽器檢測到相應的設定,就允許ajax進行跨域訪問

2.通過jsonp跨域:
什麼是jsonp?相信很多人在剛接觸jsonp時都會有這個疑問的。維基百科是這樣定義的:JSONP(json with padding),是json的一種使用模式,可以讓網頁從別的網域要資料(即跨域)。

jsonp其實是由兩部分組成的:回撥函式和資料。回撥函式是當響應到來時應該在頁面中呼叫的函式,而資料就是傳入回撥函式中的json引數。利用的是script標籤中src可以引用不同域上js檔案的思想,進行跨域。

jsonp的優點:
它不像XHR物件實現ajax請求那樣受到同源政策的限制,它的相容性更好,XHR在進行ajax請求時,為了相容IE,還需建立ActiveX物件。並且在請求完畢之後可以通過回撥函式的方式將結果回傳

jsonp的缺點:
它只支援get請求而不支援post等其它型別的HTTP請求;它只支援跨域HTTP請求這種情況,不能解決不同域的兩個頁面之間如何進行JavaScript呼叫問題

CORS與JSONP對比:
CORS無疑更為先進,方便和可靠。

  1. jsonp只能實現get請求,而CORS支援所有型別的HTTP請求
  2. 使用CORS,開發者可以使用普通的XHR發起請求和獲得資料,比起jsonp有更好的錯誤處理
  3. jsonp主要被老的瀏覽器支援,而絕大多數現代瀏覽器都已經支援CORS