什麼是瀏覽器跨域訪問操作?JS如何實現?

墨水!發表於2020-11-09

什麼是瀏覽器跨域訪問操作?js如何實現?

1.什麼是跨域?

JavaScript出於安全方面的考慮做的同源策略的限制,不允許跨域訪問其他資源。通常跨域請求成功後,瀏覽器會拒絕響應伺服器端返回的結果。

2. 怎麼樣算是跨域?

如下相對http://store.company.com/dir/page.html同源檢測的示例:
在這裡插入圖片描述
注意:域名與其對應的ip也不能成功訪問
javascript跨域訪問是web開發者經常遇到的問題,什麼是跨域,一個域上載入的指令碼獲取或操作另一個域上的文件屬性,下面將列出三種實現javascript跨域方法:

1.基於iframe實現跨域

基於iframe實現的跨域要求兩個域具有aa.xx.com,bb.xx.com這種特點,也就是兩個頁面必須屬於一個基礎域(例如都是xxx.com,或是xxx.com.cn),使用同一協議(例如都是 http)和同一埠(例如都是80),這樣在兩個頁面中同時新增document.domain,就可以實現父頁面呼叫子頁面的函式,程式碼如下:
頁面一:
Html程式碼

頁面二:
Html程式碼 收藏程式碼
在這裡插入圖片描述

這時候父頁面就可以呼叫子頁面的a函式,實現js跨域訪問

2.基於script標籤實現跨域

script標籤本身就可以訪問其它域的資源,不受瀏覽器同源策略的限制,可以通過在頁面動態建立script標籤,程式碼如下:

Java程式碼
var script = document.createElement(‘script’);
script.src = “http://aa.xx.com/js/*.js”;
document.body.appendChild(script);

這樣通過動態建立script標籤就可以載入其它域的js檔案,然後通過本頁面就可以呼叫載入後js檔案的函式,這樣做的缺陷就是不能載入其它域的文件,只能是js檔案,jsonp便是通過這種方式實現的,jsonp通過向其它域傳入一個callback引數,通過其他域的後臺將callback引數值和json串包裝成javascript函式返回,因為是通過script標籤發出的請求,瀏覽器會將返回來的字串按照javascript進行解析執行,實現了域與域之間的資料傳輸。
jquery中對jsonp的支援也是基於此方案。

3.後臺代理方式

這種方式可以解決所有跨域問題,也就是將後臺作為代理,每次對其它域的請求轉交給本域的後臺,本域的後臺通過模擬http請求去訪問其它域,再將返回的結果返回給前臺,這樣做的好處是,無論訪問的是文件,還是js檔案都可以實現跨域。

出處:https://www.cnblogs.com/mq0036/p/5656680.html

相關文章