前端跨域方法總結(jié)

PAMPANG 發(fā)布于2019-08-20 18:55 / 2510人閱讀

摘要：是的，方法被調(diào)用時，會在所有頁面腳本執(zhí)行完畢之后向目標(biāo)窗口派發(fā)一個消息。該消息有四個屬性需要注意屬性表示該的類型屬性為的第一個參數(shù)屬性表示調(diào)用方法時調(diào)用頁面的當(dāng)前狀態(tài)屬性記錄調(diào)用方法的窗口信息。

1.為什么要跨域

同源策略限制一個源加載的文檔或文檔與來自另一個源的資源進(jìn)行交互。這是一個用于隔離潛在惡意文件的安全機(jī)制。
什么是同源呢？ 如果協(xié)議，端口（如果指定了一個）和域名對于兩個頁面是相同的，則兩個頁面具有相同的源。
下表給出了相對http://store.company.com/dir/...同源檢測的示例:

跨域網(wǎng)絡(luò)訪問通常分為3種

通常允許進(jìn)行跨域?qū)懖僮鳎–ross-origin writes）。例如鏈接（links），重定向以及表單提交。特定少數(shù)的HTTP請求需要添加 preflight。

通常允許跨域資源嵌入（Cross-origin embedding）。

通常不允許跨域讀操作（Cross-origin reads）。但?？梢酝ㄟ^內(nèi)嵌資源來巧妙的進(jìn)行讀取訪問。例如可以讀取嵌入圖片的高度和寬度，調(diào)用內(nèi)嵌腳本的方法。
另外，同源策略約束了XMLHttpRequest,也就是說ajax進(jìn)行跨域訪問會報錯。

2.跨域的解決方式

2.1 window.name

原理：再瀏覽器中打開一個頁面中，或用iframe打開一個頁面時會創(chuàng)建一個window對象，當(dāng)頁面加載一個新的頁面時，window.name屬性是不會變的，因此我們可以在頁面中動態(tài)創(chuàng)建一個iframe頁面指向另一個域，將數(shù)據(jù)賦值個window.name屬性。(值得注意的是，此時我們無法直接訪問window.name),我們還需要將將iframe的src指向相同域的空白頁面。之后再將iframe刪除就可以了

//http://localhost:3000/request.js
     function CreateIframe(src, nextsrc){
        var iframe = document.createElement("iframe");
        var flag = true;
        iframe.src = src;
        iframe.style.display = "none";
        iframe.onload = function(){
            if(flag){
                iframe.src = nextsrc;
                flag = false;
            }else{
                p.innerHTML = iframe.contentWindow.name;
                iframe.contentWindow.close();
                document.body.removeChild(iframe);
                iframe.src = "";
                iframe = null
            };
        };
        document.body.appendChild(iframe);
    }

 CreateIframe("http://localhost:3001/a.html", "http://localhost:3000/b.html");

//http://localhost:3001/response.js
        function ajax(url, method){
            const xhr = new XMLHttpRequest();
            xhr.onload = function(data){
                 window.name = this.responseText
                 console.log(window.name);
            }
            xhr.open(method, url, true);
            xhr.send(null);
        }
        ajax("http://localhost:3001/req", "GET");

2.2 document_domain

原理：通過該document.domain來設(shè)置域名，但是有局限性，也就是一級域名一致才可以。

//http://localhost:3000/request.js
 document.domain = "http://localhost:3001";
 document.getElementById("iframe").onload = function(){
      var win = iframe.contentWindow;
      var doc = win.document;
      console.log(win.data);
 }

//http://localhost:3001/response.js
        document.domain = "http://localhost:3001";
        var data = "123";

2.3 JSONP

原理： JSONP實現(xiàn)跨域請求的原理簡單的說，就是動態(tài)創(chuàng)建

//jsonp.js
const Jsonp = (() => {
    function jsonp(url, handle){
        let script = document.createElement("script");
        script.setAttribute("src", `${url}?callback=${handle}`);
        document.body.appendChild(script);
    }
    return jsonp;
})()

//server.js
app.get("/", function (req, res) {
    var callbackName = req.query.callback;   // myFunction
    res.send(callbackName+"({"message": "It is JSONP!"});");
})

2.4 HTML5PostMessage

PostMessage是HTML5的API，postMessage() 方法被調(diào)用時，會在所有頁面腳本執(zhí)行完畢之后向目標(biāo)窗口派發(fā)一個 MessageEvent 消息。該MessageEvent消息有四個屬性需要注意： message 屬性表示該message 的類型； data 屬性為 window.postMessage 的第一個參數(shù)；origin 屬性表示調(diào)用window.postMessage() 方法時調(diào)用頁面的當(dāng)前狀態(tài)； source 屬性記錄調(diào)用 window.postMessage() 方法的窗口信息。
只有通過其他窗口的一個引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對象、或者是命名過或數(shù)值索引的window.frames。才能使用

////http://localhost:3000/request.js
    var popup =window.open("http://localhost:3001/index4.html");
        function receive(event){
            if(event.origin !== "http://localhost:3001") return;
            document.querySelector("#message").innerHTML = event.data;
        }
        window.addEventListener("message", receive, false);

//http://localhost:3001/response.js
    var popup = window.opener;
        popup.postMessage("發(fā)送消息", "http://localhost:3000/");
        window.addEventListener("message", (e) => {
            if(e.origin !== "http://localhost:3001") return;
            document.querySelector("#message").innerHTML = e.data;
            //e.source.postMessage("發(fā)送消息", e.origin);
        }, false)

2.4 CORS

cors主要靠服務(wù)器，只要服務(wù)器實現(xiàn)了cors接口，就可以跨源通信。具體的原理可以看阮老師的文章跨域資源共享 CORS 詳解

GPU云服務(wù)器云服務(wù)器方法總結(jié) 使用方法總結(jié) 前端cdn加速方法年終總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84873.html

發(fā)表評論

登陸后可評論

0條評論

PAMPANG

男|高級講師

我要關(guān)注我要私信

TA的文章

前端培訓(xùn)-初級階段（5 - 8）

閱讀 2396·2019-08-30 15:56
前端學(xué)習(xí)各階段分別都在哪學(xué)？

閱讀 1053·2019-08-30 15:55
前端面試每日3+1——第115天

閱讀 3218·2019-08-30 15:44
提升網(wǎng)站頁面速度的14條最佳實踐（一）

閱讀 945·2019-08-30 10:53
HTML與CSS中的顏色與單位個人分享

閱讀 1903·2019-08-29 16:33
CSS基礎(chǔ)

閱讀 2511·2019-08-29 16:13
20170601-BFC(塊級格式化上下文)

閱讀 731·2019-08-29 12:41
設(shè)置首字母大寫算法（JavaScript）

閱讀 889·2019-08-26 13:56

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端跨域方法總結(jié)

2.1 window.name

2.2 document_domain

2.3 JSONP

2.4 HTML5PostMessage

2.4 CORS

相關(guān)文章

**2018年騰訊前端一面總結(jié)（面向2019屆學(xué)生）**

**〔總結(jié)系列〕前端面試題精華篩選**

**〔總結(jié)系列〕前端面試題精華篩選**

前端秋招面試總結(jié)

前端秋招面試總結(jié)

發(fā)表評論

0條評論

PAMPANG

男|高級講師

TA的文章

前端培訓(xùn)-初級階段（5 - 8）

前端學(xué)習(xí)各階段分別都在哪學(xué)？

前端面試每日3+1——第115天

提升網(wǎng)站頁面速度的14條最佳實踐（一）

HTML與CSS中的顏色與單位個人分享

CSS基礎(chǔ)

20170601-BFC(塊級格式化上下文)

設(shè)置首字母大寫算法（JavaScript）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端跨域方法總結(jié)

2.1 window.name

2.2 document_domain

2.3 JSONP

2.4 HTML5PostMessage

2.4 CORS

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！