總結一些跨域的方式

shiyang6017 發布于2019-08-19 17:12 / 1514人閱讀

摘要：可能平時最常用到的就是方式的跨域，可以用提供的。接口鏈接回調原頁面上函數處理返回結果讓結果跳轉到域跨域原理定義一種跨域訪問的機制，可以讓實現跨域訪問。允許一個域上的網絡應用向另一個域提交跨域請求。

1、可能平時最常用到的就是get方式的jsonp跨域，可以用jquery提供的$.ajax 、$.getJSON。

$.ajax({
    url:"接口地址",
    type:"GET",
    data:"想給接口傳的數據",
    dataType:"jsonp",
    success:function(ret){
        console.log(ret);
    }
});

這樣很簡單的就可以實現jsonp的跨域，獲取接口返回值。

想更多的了解$.ajax可以參考下面的鏈接，里面有很詳細的介紹：鏈接描述

2、post方式的form表單跨域。

a.com html:

a.com callback.php:
";
//回調原頁面上函數處理返回結果
echo "window.top.postcallback(" .$_GET["data"]. ");";
echo "";

b.com api.php:


3、CORS跨域
原理：CORS定義一種跨域訪問的機制，可以讓AJAX實現跨域訪問。CORS 允許一個域上的網絡應用向另一個域提交跨域 AJAX 請求。實現此功能非常簡單，只需由服務器發送一個響應標頭即可。
注：移動終端上，除了opera Mini都支持。
利用 CORS，http://www.b.com 只需添加一個標頭，就可以允許來自 http://www.a.com 的請求，下圖是我在PHP中的 hander() 設置，“*”號表示允許任何域向我們的服務端提交請求：
header("Access-Control-Allow-Origin:*");
也可以設置指定域名：
header("Access-Control-Allow-Origin:http://www.b.com");
js部分：
$.ajax({
    url: a_cross_domain_url,
    crossDomain: true,
    method: "POST"
});
CORS比較適合應用在傳送信息量較大以及移動端來使用。
4、script標簽來跨域

js.onload = js.onreadystatechange = function() {
    if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
        // callback在此處執行
        js.onload = js.onreadystatechange = null;
    }
};
5、h5的postMessage
otherWindow.postMessage(message, targetOrigin);
otherWindow: 對接收信息頁面的window的引用。可以是頁面中iframe的contentWindow屬性；window.open的返回值；通過name或下標從window.frames取到的值。
message: 所要發送的數據，string類型。
targetOrigin: 用于限制otherWindow，“*”表示不作限制
a.com/index.html中的代碼：



b.com/index.html中的代碼：


6、子域跨域（document.domain+iframe）
www.a.com上的a.html

document.domain = "a.com";
var ifr = document.createElement("iframe");
ifr.src = "http://script.a.com/b.html";
ifr.style.display = "none";
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在這里操縱b.html
    alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
script.a.com上的b.html

document.domain = "a.com";
具體的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html兩個文件中分別加上document.domain = "a.com"；然后通過a.html文件中創建一個iframe，去控制iframe的contentDocument，這樣兩個js文件之間就可以“交互”了。當然這種辦法只能解決主域相同而二級域名不同的情況。

云服務器 GPU云服務器 vps日常維護中的一些要點總結跨域請求方式 linux域的創建如何更改整個域的時間

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78293.html

總結跨域的幾種方式

摘要：比如域的頁面通過嵌入了一個域的頁面，可以通過以下方法實現和的通信通過跨域以上幾種都是雙向通信的，即兩個，頁面與或是頁面與頁面之間的，下面說幾種單項跨域的一般用來獲取數據，因為通過標簽引入的是不受同源策略的限制的。跨域整理@(前端筆記) 跨域只要協議、域名、端口有任何一個不同，都被當作是不同的域。由于瀏覽器的同源策略，其限制之一是不能通過ajax的方法情趣請求不同源的文檔。第二個限制...

diabloneo 2019-08-21 17:52 評論0 收藏0
前端跨域總結

摘要：通過跨域通過引入的不受同源策略的限制，所以我們可以通過標簽引入一個或者是一個其他后綴形式如，等的文件，此文件返回一個函數的調用。 1.跨域的定義只要協議、域名、端口有任何一個不同，就會被當做為不同的域，如果從A域名訪問B域名上的資源就叫做跨域。下面我們來看下幾種跨域的方法： 2.document.domain 瀏覽器的同源策略有一些限制，第一，不能通過ajax方法去請求不同源的資源...

Yang_River 2019-08-01 17:27 評論0 收藏0
前端跨域總結

摘要：通過跨域通過引入的不受同源策略的限制，所以我們可以通過標簽引入一個或者是一個其他后綴形式如，等的文件，此文件返回一個函數的調用。 1.跨域的定義只要協議、域名、端口有任何一個不同，就會被當做為不同的域，如果從A域名訪問B域名上的資源就叫做跨域。下面我們來看下幾種跨域的方法： 2.document.domain 瀏覽器的同源策略有一些限制，第一，不能通過ajax方法去請求不同源的資源...

honmaple 2019-08-20 18:52 評論0 收藏0
前端跨域總結

摘要：通過跨域通過引入的不受同源策略的限制，所以我們可以通過標簽引入一個或者是一個其他后綴形式如，等的文件，此文件返回一個函數的調用。 1.跨域的定義只要協議、域名、端口有任何一個不同，就會被當做為不同的域，如果從A域名訪問B域名上的資源就叫做跨域。下面我們來看下幾種跨域的方法： 2.document.domain 瀏覽器的同源策略有一些限制，第一，不能通過ajax方法去請求不同源的資源...

caiyongji 2019-07-25 15:02 評論0 收藏0
javascript中實現跨域的方式總結

摘要：中的跨域請求應該也算是一個重點，具體什么叫跨域，在這里我就不展開了，可以查一下瀏覽器的同源策略和跨域的定義。再看后臺文件文件接收回調函數并把要返回的參數以參數注入的方式注入到回調函數中，再返回給客戶端。 js中的跨域請求應該也算是一個重點，具體什么叫跨域，在這里我就不展開了，可以查一下瀏覽器的同源策略和跨域的定義。原來只知道常用的jsonp和document.domain這兩種方式，這...

VioletJack 2019-08-20 14:39 評論0 收藏0