資訊專欄INFORMATION COLUMN
摘要：解決方案跨域問題可以說在前端方面不可避免，但同源策略畢竟在保護(hù)網(wǎng)絡(luò)信息安全方面起到很大的作用。
起因
說起來源...今天去茶水間倒水時，偶然聽到公司面試官在問面試者前端跨域的如何解決。我心中默默想了一想，啪啪啪瞬間想出幾個關(guān)鍵詞，iframe，cors，同源策略，jsonp...轉(zhuǎn)念一想，雖然這是很常見的面試題，然而我在開發(fā)過程中，還真沒有用過jsonp這種方式...就連原理也說不好。一陣?yán)浜梗? ，趕緊去找了相關(guān)資料。
同源策略對于同源策略，在這里我就不多累贅敘述了，簡單來說，如果以下三項：同一協(xié)議、同一域名、同一端口但凡有一項不滿足，瀏覽器就會把 No "Access-Control-Allow-Origin" header is present on the requested resource甩你一臉。
解決方案跨域問題可以說在前端方面不可避免，但同源策略畢竟在保護(hù)網(wǎng)絡(luò)信息安全方面起到很大的作用。試想如果沒有同源策略，別的網(wǎng)頁可以輕松竊取你的cookie，而假如你的cookie中存有你的個人信息...太可怕了，不過話說回來同源策略帶來的跨域問題也很頭疼，幸好現(xiàn)在已經(jīng)有多種方式能夠解決。
CORS 跨域資源共享策略（
JSONP
window.name
document.domain(主域相同的情況下可用）
postMessage(h5新引入）
websocket(h5新引入，不受同源策略限制，所以說h5真是個好東西...?)
...
由于篇幅有限（好吧...其實是我寫不了那么多），在這里對于其他解決方式就不一一詳解了。
正主來了，JSONPJSONP 是 JSON with Padding的簡稱，是一種較為常用的解決跨域訪問的方式。我們先來看一段示例代碼：
ajax({//此ajax方法是封裝了XMLHttpRequest對象實現(xiàn)，具體代碼與本文無關(guān)就不貼了
method : "get",
url : "http://127.0.0.1:8787",
data : {
"name" : "小明",//此ajax方法會自動將數(shù)據(jù)以get方式提交
"age" : 22
},
success : function (message) {
alert(message);
},
async : true
})
上面的代碼很簡單，瀏覽器端發(fā)起了一個異步ajax請求，讓我們來看看服務(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);
再來后臺代碼～
app.get("*", function(req, res) {
let callback = req.query.func;
let content = callback+"({"message":"測試數(shù)據(jù)2"})";
res.send(content);
});
結(jié)果：
大！獲！全！勝！
是時候分析一波戰(zhàn)術(shù)策略了～在平常寫代碼的時候，可能很多人沒有注意，瀏覽器對于script，iframe等標(biāo)簽的src等屬性，是沒有同源策略限制的。而jsonp就很好的利用了這一點～在我們發(fā)起請求時，url后跟了一個名為func的參數(shù)，而這個參數(shù)就是之后需要用到的回調(diào)函數(shù)名稱。
我們通過動態(tài)插入script標(biāo)簽的方式，利用script標(biāo)簽的src屬性發(fā)起請求，瀏覽器不會以同源策略來找事...而后臺根據(jù)請求構(gòu)造出的數(shù)據(jù)長啥樣呢？
showJsonp({"message":"測試數(shù)據(jù)2"})
告訴我！這段代碼插入你的script標(biāo)簽內(nèi)后，會發(fā)生啥？！
當(dāng)然是執(zhí)行早就定義好的showJsonp函數(shù)啊～
bingo，完美解決跨域問題～～
jsonp的方式兼容性非常好，即便是那些老古董瀏覽器，也可以用jsonp的方式解決跨域問題，但是它也有所限制，它只能使用get方式發(fā)起請求，并且對于不同域之間頁面的js互相調(diào)用無能為力。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50449.html
摘要：解決方案跨域問題可以說在前端方面不可避免，但同源策略畢竟在保護(hù)網(wǎng)絡(luò)信息安全方面起到很大的作用。 起因 說起來源...今天去茶水間倒水時，偶然聽到公司面試官在問面試者前端跨域的如何解決。我心中默默想了一想，啪啪啪瞬間想出幾個關(guān)鍵詞，iframe，cors，同源策略，jsonp...轉(zhuǎn)念一想，雖然這是很常見的面試題，然而我在開發(fā)過程中，還真沒有用過jsonp這種方式...就連原理也說不好。...
閱讀 1185·2023-04-26 02:38
閱讀 1477·2021-11-22 09:34
閱讀 1186·2021-09-26 10:19
閱讀 3167·2019-08-29 17:15
閱讀 3523·2019-08-29 12:27
閱讀 1719·2019-08-26 13:51
閱讀 1865·2019-08-26 13:47
閱讀 1017·2019-08-26 12:20
