跨域訪問3種解決方案
阿新 • • 發佈：2019-01-25
三種方法實現js跨域訪問
部落格分類： web前端
javascripthtmljsonp指令碼
javascript跨域訪問是web開發者經常遇到的問題，什麼是跨域，一個域上載入的指令碼獲取或操作另一個域上的文件屬性，下面將列出三種實現javascript跨域方法:
1.基於iframe實現跨域
基於iframe實現的跨域要求兩個域具有aa.xx.com,bb.xx.com這種特點，也就是兩個頁面必須屬於一個基礎域（例如都是xxx.com，或是xxx.com.cn），使用同一協議（例如都是 http）和同一埠（例如都是80），這樣在兩個頁面中同時新增document.domain，就可以實現父頁面呼叫子頁面的函式，程式碼如下：
頁面一：
Html程式碼 收藏程式碼
<html>
<head>
<script>
document.domain = "xx.com";
function aa(){
alert("p");
}
</script>
</head>
<body>
<iframe src="http://localhost:8080/CmsUI/2.html" id="i">
</iframe>
<script>
document.getElementById('i').onload = function(){
var d = document.getElementById('i').contentWindow;
d.a();
};
</script>
</body>
</html>
頁面二：
Html程式碼 收藏程式碼
<html>
<head>
<script>
document.domain = "xx.com";
function a(){
alert("c");
}
</script>
</head>
<body>
</body>
</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檔案都可以實現跨域。
部落格分類： web前端
javascripthtmljsonp指令碼
javascript跨域訪問是web開發者經常遇到的問題，什麼是跨域，一個域上載入的指令碼獲取或操作另一個域上的文件屬性，下面將列出三種實現javascript跨域方法:
1.基於iframe實現跨域
基於iframe實現的跨域要求兩個域具有aa.xx.com,bb.xx.com這種特點，也就是兩個頁面必須屬於一個基礎域（例如都是xxx.com，或是xxx.com.cn），使用同一協議（例如都是 http）和同一埠（例如都是80），這樣在兩個頁面中同時新增document.domain，就可以實現父頁面呼叫子頁面的函式，程式碼如下：
頁面一：
Html程式碼 收藏程式碼
<html>
<head>
<script>
document.domain = "xx.com";
function aa(){
alert("p");
}
</script>
</head>
<body>
<iframe src="http://localhost:8080/CmsUI/2.html" id="i">
</iframe>
<script>
document.getElementById('i').onload = function(){
var d = document.getElementById('i').contentWindow;
d.a();
};
</script>
</body>
</html>
頁面二：
Html程式碼 收藏程式碼
<html>
<head>
<script>
document.domain = "xx.com";
function a(){
alert("c");
}
</script>
</head>
<body>
</body>
</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檔案都可以實現跨域。