資訊專欄INFORMATION COLUMN
摘要：上節(jié)我們講了同源策略，這節(jié)我們講講如何跨域。當(dāng)這些從的腳本執(zhí)行出錯(cuò)，因?yàn)檫`背了同源策略為了保證用戶信息不被泄露，錯(cuò)誤信息不會(huì)顯示出來(lái)，取而代之只會(huì)返回一個(gè)。
前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén)，但也僅僅是入門(mén)，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開(kāi)課啦（每周四）。
JSONP 跨域請(qǐng)求原理以及實(shí)現(xiàn)方式j(luò)Query封裝的Ajax調(diào)用和JSONP數(shù)據(jù)跨域請(qǐng)求原理和實(shí)現(xiàn)
這節(jié)題目有點(diǎn)奇怪啊。
上節(jié)我們講了同源策略，這節(jié)我們講講如何跨域。這東西就和產(chǎn)品提需求一樣，我知道不合理，但是我就想要。
iframe 跨域
比如 www.51vv.com 的一部分（header吧），我 k.51vv.com 也想用。默認(rèn)情況下不同源，是不允許的。那我們?cè)趺崔k呢？
domain
postMessage
ajax 跨域
JSONP
CORS
服務(wù)器代理
canvas 資源跨域
image 跨域
script 資源跨域
Script error.
為了提升網(wǎng)站的訪問(wèn)速度，我們通常都會(huì)將靜態(tài)資源文件(css, image, javascript)放在CDN。當(dāng)這些從CDN的JavaScript腳本執(zhí)行出錯(cuò)，因?yàn)檫`背了同源策略, 為了保證用戶信息不被泄露，錯(cuò)誤信息不會(huì)顯示出來(lái)，取而代之只會(huì)返回一個(gè)Script error.。
這部分知識(shí)是我們開(kāi)發(fā)中經(jīng)常會(huì)遇到的。下面我們來(lái)介紹一下常見(jiàn)的幾種方法。
JSONP 跨域方案 JSONP 優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
瀏覽器兼容性強(qiáng)（全支持）
缺點(diǎn)
不安全（嵌入異常邏輯代碼）
只能發(fā)GET請(qǐng)求
JSONP 原理下面我們來(lái)說(shuō)一下JSONP的原理，順便分析一下上面的優(yōu)缺點(diǎn)。
首先 script 標(biāo)簽引入的代碼，不管跨不跨域都可以執(zhí)行。常見(jiàn)的就是CDN的資源，我們拿來(lái)使用。
正常的JSON數(shù)據(jù)為{code: 200, res: [{id:1,state:0},{id:2,state:1}]}。
如果我們 script 標(biāo)簽引入的資源就是帶數(shù)據(jù)的。
比如console.log({code: 200, res: [{id:1,state:0},{id:2,state:1}]})，這樣不就等于拿到了數(shù)據(jù)？
服務(wù)端拼接callback名稱，動(dòng)態(tài)生成返回?cái)?shù)據(jù)。
從上面的原理看到JSONP就等于用script加載代碼?；?b>
初級(jí)階段文章目錄前端培訓(xùn)-初級(jí)階段（17） - 數(shù)據(jù)存儲(chǔ)（cookie、session、stroage）
前端培訓(xùn)-初級(jí)階段（13） - 正則表達(dá)式
前端培訓(xùn)-初級(jí)階段（13） - 類、模塊、繼承
前端培訓(xùn)-初級(jí)階段（13） - ECMAScript （內(nèi)置對(duì)象、函數(shù)）
前端培訓(xùn)-初級(jí)階段（13） - ECMAScript （語(yǔ)法、變量、值、類型、運(yùn)算符、語(yǔ)句）
前端培訓(xùn)-初級(jí)階段（13、18）
前端培訓(xùn)-初級(jí)階段（9 -12）
前端培訓(xùn)-初級(jí)階段（5 - 8）
前端培訓(xùn)-初級(jí)階段（1 - 4）
中級(jí)階段文章目錄前端培訓(xùn)-中級(jí)階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）
前端培訓(xùn)-中級(jí)階段（3） - DOM 文檔對(duì)象模型（2019-06-27期）
前端培訓(xùn)-中級(jí)階段（4）- BOM 瀏覽器對(duì)象模型（2019-07-04期）
前端培訓(xùn)-中級(jí)階段（5）- jQuery的概念與基本使用（2019-07-11期）
前端培訓(xùn)-中級(jí)階段（6）- jQuery元素節(jié)點(diǎn)操作（2019-07-18期）
前端培訓(xùn)-中級(jí)階段（7）- jQuery的事件綁定鏈?zhǔn)讲僮骷霸恚?019-07-25期）
前端培訓(xùn)-中級(jí)階段（8）- jQuery元素屬性樣式操作（2019-08-01期）
前端培訓(xùn)-中級(jí)階段（9）- 原生Ajax的運(yùn)行原理與實(shí)現(xiàn)（2019-08-08期）
前端培訓(xùn)-中級(jí)階段（10）- 同源策略（2019-08-15期）
資料前端培訓(xùn)目錄、前端培訓(xùn)規(guī)劃、前端培訓(xùn)計(jì)劃
瀏覽器同源策略及跨域的解決方法
Same-origin policy
Script error.全面解析
之前雖然也知道這個(gè)錯(cuò)誤。但是沒(méi)有仔細(xì)看過(guò)。直到靜態(tài)資源上CDN，才發(fā)現(xiàn)了這個(gè)問(wèn)題。
跨域資源共享 CORS 詳解 - 阮一峰的網(wǎng)絡(luò)日志
記得當(dāng)初是一個(gè)上傳功能，需要走統(tǒng)一上傳服務(wù)器發(fā)現(xiàn)了CORS和OPTIONS。就是在大佬這里看懂的。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/106032.html
摘要：前端最基礎(chǔ)的就是。的原理瀏覽器發(fā)送請(qǐng)求，服務(wù)器給出響應(yīng)。保持之前的界面不變化。的核心創(chuàng)建一個(gè)對(duì)象，用于發(fā)起請(qǐng)求設(shè)置為請(qǐng)求，請(qǐng)求發(fā)送請(qǐng)求。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén)，但也僅僅是入門(mén)，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開(kāi)課啦（每周四）。 ajax ...
摘要：前端最基礎(chǔ)的就是。的原理瀏覽器發(fā)送請(qǐng)求，服務(wù)器給出響應(yīng)。保持之前的界面不變化。的核心創(chuàng)建一個(gè)對(duì)象，用于發(fā)起請(qǐng)求設(shè)置為請(qǐng)求，請(qǐng)求發(fā)送請(qǐng)求。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén)，但也僅僅是入門(mén)，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開(kāi)課啦（每周四）。 ajax ...
摘要：同源策略是什么同源策略是瀏覽器的一個(gè)安全功能，不同源的數(shù)據(jù)禁止訪問(wèn)?；蛟S你可以說(shuō)驗(yàn)證，在瀏覽器沒(méi)有同源策略的情況下這些都可以繞過(guò)去?？偨Y(jié)同源策略是蠻好的，防御了大部分的攻擊。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén)，但也僅僅是入門(mén)，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思...
摘要：前端最基礎(chǔ)的就是。幫助從舊的事件方法轉(zhuǎn)換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數(shù)。用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。事件觸發(fā)模擬觸發(fā)原生使用觸發(fā)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén)，但也僅僅是入門(mén)，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS）...
閱讀 2763·2021-09-24 09:47
閱讀 4382·2021-08-27 13:10
閱讀 3032·2019-08-30 15:44
閱讀 1302·2019-08-29 12:56
閱讀 2604·2019-08-28 18:07
閱讀 2627·2019-08-26 14:05
閱讀 2587·2019-08-26 13:41
閱讀 1278·2019-08-26 13:33
