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

資訊專欄INFORMATION COLUMN

老生常談的跨域問(wèn)題JSONP解決方式

asoren / 531人閱讀

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

起因

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

同源策略

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

解決方案

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

CORS 跨域資源共享策略（

JSONP

window.name

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

postMessage(h5新引入）

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

...

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

正主來(lái)了，JSONP

JSONP 是 JSON with Padding的簡(jiǎn)稱，是一種較為常用的解決跨域訪問(wèn)的方式。我們先來(lái)看一段示例代碼：

ajax({//此ajax方法是封裝了XMLHttpRequest對(duì)象實(shí)現(xiàn)，具體代碼與本文無(wú)關(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
})

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

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

清晰，易懂～so，what happend？

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

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);

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

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

結(jié)果：

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

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

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

最后

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

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

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

相關(guān)文章

  • 老生常談的跨域問(wèn)題JSONP解決方式

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

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

  • 徹底弄懂跨域問(wèn)題

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

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

  • 徹底弄懂跨域問(wèn)題

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

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

  • 老生常談跨域問(wèn)題

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

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

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

0條評(píng)論

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