国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

老生常談的跨域問題JSONP解決方式

jemygraw / 907人閱讀

摘要：解決方案跨域問題可以說在前端方面不可避免，但同源策略畢竟在保護(hù)網(wǎng)絡(luò)信息安全方面起到很大的作用。

起因

說起來源...今天去茶水間倒水時(shí)，偶然聽到公司面試官在問面試者前端跨域的如何解決。我心中默默想了一想，啪啪啪瞬間想出幾個(gè)關(guān)鍵詞，iframe，cors，同源策略，jsonp...轉(zhuǎn)念一想，雖然這是很常見的面試題，然而我在開發(fā)過程中，還真沒有用過jsonp這種方式...就連原理也說不好。一陣?yán)浜梗? ，趕緊去找了相關(guān)資料。

同源策略

對(duì)于同源策略，在這里我就不多累贅敘述了，簡單來說，如果以下三項(xiàng)：同一協(xié)議、同一域名、同一端口但凡有一項(xiàng)不滿足，瀏覽器就會(huì)把 No "Access-Control-Allow-Origin" header is present on the requested resource甩你一臉。

解決方案

跨域問題可以說在前端方面不可避免，但同源策略畢竟在保護(hù)網(wǎng)絡(luò)信息安全方面起到很大的作用。試想如果沒有同源策略，別的網(wǎng)頁可以輕松竊取你的cookie，而假如你的cookie中存有你的個(gè)人信息...太可怕了，不過話說回來同源策略帶來的跨域問題也很頭疼，幸好現(xiàn)在已經(jīng)有多種方式能夠解決。

CORS 跨域資源共享策略（

JSONP

window.name

document.domain(主域相同的情況下可用）

postMessage(h5新引入）

websocket(h5新引入，不受同源策略限制，所以說h5真是個(gè)好東西...?)

...

由于篇幅有限（好吧...其實(shí)是我寫不了那么多），在這里對(duì)于其他解決方式就不一一詳解了。

正主來了，JSONP

JSONP 是 JSON with Padding的簡稱，是一種較為常用的解決跨域訪問的方式。我們先來看一段示例代碼：

ajax({//此ajax方法是封裝了XMLHttpRequest對(duì)象實(shí)現(xiàn)，具體代碼與本文無關(guān)就不貼了
  method : "get",
  url : "http://127.0.0.1:8787",
  data : {
  "name" : "小明",//此ajax方法會(huì)自動(dòng)將數(shù)據(jù)以get方式提交
  "age" : 22
  },
  success : function (message) {
    alert(message);
  },
  async : true
})

上面的代碼很簡單，瀏覽器端發(fā)起了一個(gè)異步ajax請(qǐng)求，讓我們來看看服務(wù)端代碼：

app.get("*", function(req, res) {//這里只截取了關(guān)鍵代碼
  res.send("測試數(shù)據(jù)");
});

清晰，易懂～so，what happend？

不出所料，瀏覽器甩了我一臉...
易地再戰(zhàn)！JSONP炸裂出場～

function showJsonp(obj){
  console.log(obj.message);
}
var url = "http://127.0.0.1:8787/?func=showJsonp"
var script = document.createElement("script");
script.setAttribute("src",url);
script.setAttribute("type","text/javascript");
document.getElementsByTagName("head")[0].appendChild(script);

再來后臺(tái)代碼～

app.get("*", function(req, res) {
  let callback = req.query.func;
  let content = callback+"({"message":"測試數(shù)據(jù)2"})";
  res.send(content);
});

結(jié)果：

大！獲！全！勝！
是時(shí)候分析一波戰(zhàn)術(shù)策略了～在平常寫代碼的時(shí)候，可能很多人沒有注意，瀏覽器對(duì)于script，iframe等標(biāo)簽的src等屬性，是沒有同源策略限制的。而jsonp就很好的利用了這一點(diǎn)～在我們發(fā)起請(qǐng)求時(shí)，url后跟了一個(gè)名為func的參數(shù)，而這個(gè)參數(shù)就是之后需要用到的回調(diào)函數(shù)名稱。
我們通過動(dòng)態(tài)插入script標(biāo)簽的方式，利用script標(biāo)簽的src屬性發(fā)起請(qǐng)求，瀏覽器不會(huì)以同源策略來找事...而后臺(tái)根據(jù)請(qǐng)求構(gòu)造出的數(shù)據(jù)長啥樣呢？

showJsonp({"message":"測試數(shù)據(jù)2"})

告訴我！這段代碼插入你的script標(biāo)簽內(nèi)后，會(huì)發(fā)生啥？！
當(dāng)然是執(zhí)行早就定義好的showJsonp函數(shù)啊～
bingo，完美解決跨域問題～～

最后

jsonp的方式兼容性非常好，即便是那些老古董瀏覽器，也可以用jsonp的方式解決跨域問題，但是它也有所限制，它只能使用get方式發(fā)起請(qǐng)求，并且對(duì)于不同域之間頁面的js互相調(diào)用無能為力。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/50449.html

相關(guān)文章

  • 老生常談的跨域問題JSONP解決方式

    摘要：解決方案跨域問題可以說在前端方面不可避免，但同源策略畢竟在保護(hù)網(wǎng)絡(luò)信息安全方面起到很大的作用。 起因 說起來源...今天去茶水間倒水時(shí)，偶然聽到公司面試官在問面試者前端跨域的如何解決。我心中默默想了一想，啪啪啪瞬間想出幾個(gè)關(guān)鍵詞，iframe，cors，同源策略，jsonp...轉(zhuǎn)念一想，雖然這是很常見的面試題，然而我在開發(fā)過程中，還真沒有用過jsonp這種方式...就連原理也說不好。...

    asoren 評(píng)論0 收藏0

  • 徹底弄懂跨域問題

    摘要：用于告知瀏覽器可以將預(yù)先檢查請(qǐng)求返回結(jié)果緩存的時(shí)間，在緩存有效期內(nèi)，瀏覽器會(huì)使用緩存的預(yù)先檢查結(jié)果判斷是否發(fā)送跨域請(qǐng)求。 跨域，老生常談的問題 簡述 作為一只前端菜鳥，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來越近，就算是菜鳥也要猛振翅膀。近幾日仔細(xì)研究了跨域問題，寫下這篇文章，希望對(duì)開發(fā)者們有所幫助。在讀本文前，希望您對(duì)以下知識(shí)略有了解。 瀏覽器同源策略 n...

    rose 評(píng)論0 收藏0

  • 徹底弄懂跨域問題

    摘要：瀏覽器同源策略我們?yōu)楹我芯靠缬騿栴}因?yàn)闉g覽器的同源策略規(guī)定某域下的客戶端在沒明確授權(quán)的情況下，不能讀寫另一個(gè)域的資源。 跨域，老生常談的問題 簡述 作為一只前端菜鳥，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來越近，就算是菜鳥也要猛振翅膀。近幾日仔細(xì)研究了跨域問題，寫下這篇文章，希望對(duì)開發(fā)者們有所幫助。在讀本文前，希望您對(duì)以下知識(shí)略有了解。 瀏覽器同源策略 n...

    CoorChice 評(píng)論0 收藏0

  • 老生常談跨域問題

    摘要：瀏覽器在請(qǐng)求不同域的資源時(shí)，會(huì)因?yàn)橥床呗缘挠绊懻?qǐng)求不成功，這就是通常被提到的跨域問題。需要說明的幾個(gè)點(diǎn)如果是協(xié)議和端口造成的跨域問題，前端是無能為力的。 前段時(shí)間在網(wǎng)上跟一個(gè)大廠據(jù)說很NB的同行大佬聊天，然后大佬問了我一個(gè)問題，在實(shí)際生產(chǎn)中前端怎么解決跨域問題 我當(dāng)時(shí)就回答說我們目前的狀況是需要服務(wù)端做一些配合解決的，然后大佬很不滿意的暗示了我一下JSONP用過嗎？我當(dāng)時(shí)就覺得很不可...

    Kaede 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<