打鐵趁熱。
上一期,我們提到同源策略的一些限制刑峡,包括:
瀏覽器中頁(yè)面與頁(yè)面之間的訪問(wèn)限制
瀏覽器與服務(wù)器之間的請(qǐng)求訪問(wèn)限制
而越過(guò)同源策略的限制,我們稱(chēng)之為跨域玄柠。
比如最常見(jiàn)的:開(kāi)發(fā)階段需要請(qǐng)求線上服務(wù)器資源突梦。
此時(shí)本地的頁(yè)面與線上服務(wù)器肯定不同源,這就需要跨域解決羽利。
JSONP宫患、使用代理服務(wù)器、跨源資源共享(CORS)铐伴、使用 WebSocket 等都是常見(jiàn)的辦法撮奏。
在 《JavaScript 高級(jí)程序設(shè)計(jì)(第三版)》586頁(yè)
中,還提到一種有趣的技術(shù):
圖像 Ping当宴。
利用動(dòng)態(tài)創(chuàng)建 <img>
來(lái)觸發(fā)鏈接畜吊,就像從頁(yè)面向服務(wù)器發(fā)送了一個(gè) Ping 請(qǐng)求,實(shí)現(xiàn)了瀏覽器向服務(wù)器的單向通訊户矢。
??上面提到的都是瀏覽器與服務(wù)器之間的跨域方案玲献。
但是不要忽略了——
還有瀏覽器與瀏覽器之間的跨域。
關(guān)于頁(yè)面間的跨域,最值得關(guān)注的是 window.postMessage()
這個(gè) API 捌年,調(diào)用它能將消息發(fā)送到其他頁(yè)面瓢娜。
今天給大家?guī)?lái)的也是一道比較簡(jiǎn)單的跨域題目。
題目
在前端項(xiàng)目開(kāi)發(fā)過(guò)程中礼预,如果需要 Get 請(qǐng)求線上數(shù)據(jù)眠砾,下列幾種跨域方案中,哪一種不需要依賴(lài)服務(wù)器端托酸?
- A. 跨源資源共享(CORS)
- B. JSONP
- C. 配置代理服務(wù)器
- D. WebSocket
正確答案:C
解析:
跨源資源共享(CORS)需要服務(wù)器端在返回報(bào)文的頭部做相應(yīng)處理褒颈。
JSONP 需要服務(wù)器端將 JSON 數(shù)據(jù)填充(Padding)到前后端約定的字段中返回。
WebSocket 通信協(xié)議需要后端的支持才能啟用励堡。
所以谷丸,只有配置代理服務(wù)器,這種方案可以不依賴(lài)服務(wù)器端应结。只需要在本地配置好代理服務(wù)器刨疼,實(shí)現(xiàn)請(qǐng)求的轉(zhuǎn)發(fā),即可進(jìn)行跨域請(qǐng)求鹅龄。
點(diǎn)擊??「跨域測(cè)試」??揩慕,一道小題目測(cè)試你對(duì)跨域的理解。