寫在前面的:
為什么需要跨域:同源策略(Same-Origin Policy)叁丧。所謂同源是指啤誊,域名岳瞭,協(xié)議,端口相同蚊锹。
不同源(域名瞳筏、協(xié)議、端口只要有一個(gè)不同)的客戶端腳本(JavaScript)在沒明確授權(quán)的情況下牡昆,不能讀寫對(duì)方的資源姚炕。
1、關(guān)于只在chrome瀏覽器端設(shè)置的跨域:
在chrome的桌面快捷圖標(biāo)上右鍵——>屬性——>快鍵方式一欄丢烘。在目標(biāo)一欄的輸入框里后面追加下面加粗斜體的一串字符串柱宦,注意和前面部分有空格。其中C:\MyChromeDevUserData需要在c盤新建一個(gè)空的這個(gè)文件夾播瞳。然后重啟chrome瀏覽器掸刊。只有從桌面快捷方式打開的才有效。
"D:\Program Files\googlechrome_dev\chrome.exe" --args --disable-web-security --user-data-dir=C:\MyChromeDevUserData,--user-data-dir
如果看到:
2忧侧、post跨域上傳文件的iframe解決方案:jsp頁(yè)面方式。
首先牌芋,在window對(duì)象下定義一個(gè)方法苍柏,參數(shù)為后端傳過來(lái)的數(shù)據(jù)。
然后姜贡,在待提交的表單里要添加一個(gè)隱藏的input ,設(shè)置name為'callback', value值為上面window下定義的那個(gè)方法名棺棵。
然后楼咳,在body里動(dòng)態(tài)添加一個(gè)隱藏的iframe頁(yè)面,在這個(gè)iframe頁(yè)面里通過js設(shè)置它的document.domain為父域烛恤。
代碼為:var str = location.hostname;
document.domain = str.substring(str.indexOf(".") + 1);
然后再這這個(gè)iframe里調(diào)用父頁(yè)面定義的那個(gè)在window下的方法母怜。可以是通過jsp頁(yè)面后端傳過來(lái)的參數(shù):parent["${param.callback}"]( ${res} );其中${res}為后端傳過來(lái)的前端所需要的參數(shù)缚柏。
3苹熏、普通的ajax也可以通過iframe來(lái)實(shí)現(xiàn)跨域請(qǐng)求數(shù)據(jù):待補(bǔ)充。
實(shí)現(xiàn)原來(lái)大體和上面差不多币喧。也是讓后端返回一個(gè)頁(yè)面把數(shù)據(jù)填寫到j(luò)s里面轨域,然后前端通過一個(gè)iframe去加載這個(gè)頁(yè)面。
document.domain + iframe ? ? ?(只有在主域相同的時(shí)候才能使用該方法)杀餐;
但是缺點(diǎn)是性能比較低干发。
4、Jsonp方式實(shí)現(xiàn)跨域請(qǐng)求:script標(biāo)簽不受同源限制
JSONP包含兩部分:動(dòng)態(tài)構(gòu)造一個(gè)script標(biāo)簽添加到頁(yè)面和一個(gè)接受數(shù)據(jù)的回調(diào)函數(shù)史翘。
jsonp只支持get的請(qǐng)求方式枉长,因?yàn)樗荒芡ㄟ^script標(biāo)簽的src傳入?yún)?shù)冀续。所以不支持文件上傳,安全性比較弱必峰,所傳的參數(shù)量也比較少洪唐。
利用元素的這個(gè)開放策略,網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的 JSON 資料吼蚁,而這種使用模式就是所謂的 JSONP凭需。用 JSONP 抓到的資料并不是 JSON,而是任意的javascript桂敛,用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析功炮。
使用原生方式來(lái)寫jsonp:
jsonp的核心法則是動(dòng)態(tài)添加:下面是使用jquery的ajax封裝好的jsonp:
5、最官方實(shí)用的跨域: 后端設(shè)置cors實(shí)現(xiàn)跨域术唬。
簡(jiǎn)單說(shuō)就是在后端返回的Response Headers里設(shè)置一個(gè)允許訪問的請(qǐng)求源薪伏。
在NodeJS中可以這樣:
在其他語(yǔ)言的后端也是類似的。
其中粗仓,Access-Control-Allow-Origin就是我們需要設(shè)置的域名嫁怀,Access-Control-Allow-Methods是允許的請(qǐng)求方式,Access-Control-Allow-Headers跨域允許包含的頭借浊。
6塘淑、To be continue......