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

資訊專欄INFORMATION COLUMN

通俗易懂講解跨域的前世今生

Michael_Lin / 3417人閱讀

摘要：把數(shù)據(jù)包裹在一個客戶端聲明的本地的回調(diào)函數(shù)中，這樣可以動態(tài)加載一個跨域服務(wù)器數(shù)據(jù)。在本地聲明這個動態(tài)中的回調(diào)函數(shù)名稱，并且定義該函數(shù)，然后通過參數(shù)傳遞到服務(wù)器。

為什么要跨域 
我們都知道在瀏覽器地址欄輸入地址的時候可以隨便訪問一個頁面，但是如果你在ajax請求中發(fā)出一個xhr請求那么因為瀏覽器安全策略只有同源的服務(wù)器才能處理。這就是同源策略 要求協(xié)議/域名/端口三者完全一致才能訪問

例如以下的代碼例子，我們需要獲取服務(wù)器上README.md里面的數(shù)據(jù)

{
  status:"sucess",
  data:{
    city:["南京","北京"]
  }
}

本地js代碼如下

如果地址欄是下面這樣

那么我們是可以訪問到這個數(shù)據(jù)文件的

如果我在另外一個不同源域名下執(zhí)行同樣的代碼例如下面這個地址

那么就會出現(xiàn)下面的錯誤

這個錯誤的意思說白了就是服務(wù)器禁止不同源的頁面進(jìn)行ajax請求數(shù)據(jù)。

非要獲取這個數(shù)據(jù)我們應(yīng)該怎么做

我們注意到有的網(wǎng)站會提供cdn服務(wù)我們可以從不同的服務(wù)器添加下面的代碼

這就為我們跨域獲取數(shù)據(jù)提供了可能

node服務(wù)器端代碼如下 
var path = require("path")
var express = require("express")
const app = express()
app.use(express.static(path.join(__dirname, "jsonp")))
console.log("> Starting dev server...")
app.get("/detail", (req, res) => {
    let cb = req.query.cb ? req.query.cb : null
        // console.log("succuess")
    let readStream = fs.createReadStream(`README.md`)
    let data = ""
    readStream.on("data", chunk => {
        data += chunk
    })
    readStream.on("end", () => {
        // console.log(data)
        res.send(`${cb}(${data})`)
    })
})
var server = app.listen(8888)
console.log("server is running at port 8888")

1.基本原理我們可以動態(tài)生成script標(biāo)簽，把請求的url添加到script標(biāo)簽的src屬性上。把數(shù)據(jù)包裹在一個客戶端聲明的本地的回調(diào)函數(shù)中，這樣可以動態(tài)加載一個跨域服務(wù)器數(shù)據(jù)。

  function jsonp(obj) {
            let scriptDOM = document.createElement("script")
            scriptDOM.setAttribute("src", `${obj.url}?cb=${obj.cb}`)
            window["callback"] = obj.success
            document.querySelector("body").appendChild(scriptDOM)
            scriptDOM.onload = function() {
                window["callback"] = null
                this.parentNode.removeChild(this)

            }
            scriptDOM.onerror = e => {
                console.log("jsonp error!", e)
            }




        }
        jsonp({
            url: "http://localhost:8888/detail",
            cb: "callback",
            success: data => {
                if (data) {
                    console.log("jsonp data", data)
                }
            }
        })

2.在本地聲明這個動態(tài)script中的回調(diào)函數(shù)名稱，并且定義該函數(shù)，然后通過url參數(shù)傳遞到服務(wù)器。服務(wù)器把數(shù)據(jù)包裹成這個函數(shù)的參數(shù)傳遞回來，跨域就實現(xiàn)了。

為什么要這么做?以前我也很困惑。你獲取到的數(shù)據(jù)有可能是個json也有可能是個純文本，而script標(biāo)簽內(nèi)的內(nèi)容只能是合法的js語句，如果你沒有用回調(diào)函數(shù)包裹，直接從服務(wù)器傳遞回來原生數(shù)據(jù)。有可能是一段惡意代碼，或者是非法的js字符，那么瀏覽器就會報錯或者產(chǎn)生不可預(yù)料的顯示結(jié)果。并且你事先不知道瀏覽器傳遞過來的代碼跟你寫的有沒有沖突，是不是完全耦合。只有在本地定義一個函數(shù)傳遞到服務(wù)器，這樣服務(wù)器用該函數(shù)包裹代碼后傳遞回來才能跟我們的本地js代碼緊密配合。這樣服務(wù)器傳遞回來執(zhí)行的代碼就是我們自己定義的函數(shù)（數(shù)據(jù)存在函數(shù)的參數(shù)里），可以很好跟我們自己的代碼配合。這樣頗有Vue Angular子組件向父組件傳遞數(shù)據(jù)的思想

這樣不同域名下的數(shù)據(jù)我們拿到了結(jié)果如下

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

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

相關(guān)文章

  • ES6-前世今生（0）

    摘要：更新了個版本，最新正式版是語言的下一代標(biāo)準(zhǔn)，早已在年月正式發(fā)布?；静恢С忠苿佣藶g覽器對的支持情況版起便可以支持的新特性。比較通用的工具方案有，，，等。 1、ECMAScript是什么？ 和 JavaScript 有著怎樣的關(guān)系？ 1996 年 11 月，Netscape 創(chuàng)造了javascript并將其提交給了標(biāo)準(zhǔn)化組織 ECMA，次年，ECMA 發(fā)布 262 號標(biāo)準(zhǔn)文件（ECMA-...

    LeviDing 評論0 收藏0

  • python協(xié)程的前世今生

    摘要：協(xié)程的歷史說來話長，要從生成器開始講起。我們可以使用把數(shù)據(jù)發(fā)送給協(xié)程函數(shù)?？梢钥吹剑诘诖谓邮胀陻?shù)據(jù)之后，會產(chǎn)生結(jié)束的異常，因為程序流程結(jié)束了，這是正常現(xiàn)象。在這個階段，協(xié)程本質(zhì)上還是由生成器構(gòu)成的。所以，協(xié)程的介紹到這里就結(jié)束啦。 在上一篇對python并發(fā)編程的理解 中，我簡單提到了協(xié)程的概念，有一個錯誤需要指出的是，asyncio不全是對協(xié)程的實現(xiàn)，只是用到了協(xié)程。 協(xié)程的歷史說...

    stackfing 評論0 收藏0

  • 有價值的前端技術(shù)點

    摘要：借著產(chǎn)品層面的功能和視覺升級，我們用對它進(jìn)行了一次技術(shù)重構(gòu)。前端優(yōu)化是一個讓人技術(shù)提升的，希望你也能從這里學(xué)到一些東西。年最流行的前端鏈接我們每周會給多名前端開發(fā)者發(fā)送新聞郵件。 面試 -- 網(wǎng)絡(luò) HTTP 現(xiàn)在面試門檻越來越高，很多開發(fā)者對于網(wǎng)絡(luò)知識這塊了解的不是很多，遇到這些面試題會手足無措。本篇文章知識主要集中在 HTTP 這塊。文中知識來自 《圖解 HTTP》與維基百科，若有錯...

    microelec 評論0 收藏0

  • kube-dns的前世今生

    摘要：通過監(jiān)視資源的變化，并根據(jù)的信息生成記錄寫入到中。是唯一保留的容器，依然提供健康檢查。操作會獲取最新的全量資源與本地狀態(tài)進(jìn)行比較來產(chǎn)生通知，可以避免網(wǎng)絡(luò)原因?qū)е碌膩G失通知的情況。最后一個參數(shù)用來設(shè)置處理事件的回調(diào)。 上一期我們以1.2版本為背景，介紹了K8S的服務(wù)發(fā)現(xiàn)和kube-dns插件的相關(guān)內(nèi)容。有了上一期內(nèi)容作為基礎(chǔ)，這期了解最新版本的kube-dns就會容易很多。 本文主要對比...

    Lin_R 評論0 收藏0

  • Web技術(shù)的前世今生（二）

    摘要：前言我是，如果你還不認(rèn)識我，不妨先看看技術(shù)的前世今生一平靜的生活已經(jīng)有一段日子了。傳送門技術(shù)的前世今生一技術(shù)的前世今生三 前言：我是JavaScript，如果你還不認(rèn)識我，不妨先看看《Web技術(shù)的前世今生（一）》 平靜的生活已經(jīng)有一段日子了。 這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？ 大哥，您這說的哪里話，我什么地方做的不對么？我一臉茫然地回答道。 哼，...

    Stardustsky 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<