跨域的解決方案
script叹括,img恨课,link性誉,iframe豁鲤,不存在跨域請求限制。
1惫恼、JSONP档押,
script//基于script標(biāo)簽做的跨域
src="http://127.0.0.1:4000/list?callvack=func"
function func(){//這個函數(shù)必須是全局函數(shù)
···
}
客戶端向服務(wù)器發(fā)請求,同時會把本地的一個函數(shù)傳遞給服務(wù)器祈纯,服務(wù)器接受客戶端的請求令宿,同時拿到了callback=func。1腕窥、準(zhǔn)備數(shù)據(jù)data={...}粒没。2、給客戶端返回數(shù)據(jù)簇爆,返回的一個字符串‘func(’+JSON.stringify(data)+')'癞松。客戶端接受到就開始搞事情了入蛆。
問題:1响蓉、JSONP只能處理GET請求。2哨毁、安全性不好枫甲。
2、CORS跨域資源共享
客戶端正常發(fā)請求扼褪,
服務(wù)器端通過設(shè)置請求頭允許源發(fā)送跨域請求(需要處理options試探性請求)想幻。
問題是不能用cookie,因為設(shè)置所有源都可以訪問迎捺,這樣傳來傳去會導(dǎo)致會不安全举畸。
3、proxy跨域代理
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://www.baidu.com/',
pathRewrite: {
'^/api': ''
},
changeOrigin: true,
secure: false,
}
}
}
}
'/api':捕獲api的標(biāo)志凳枝,如果api中有這個字符,那么就開始匹配代理跋核,比如以上例子api請求/api/login岖瑰,就會被代理到 'http://www.baidu.com/api/login'。
target:代理api地址砂代,就是需要跨域的api地址蹋订。地址可以是域名,可以是IP地址刻伊。如果是域名的話需要加一個參數(shù)changeOrigin:true露戒,否則會代理失敗椒功。
pathRewrite:路徑重寫,也就是說會修改最終請求的api路徑智什,比如訪問的api路徑/api/login动漾,設(shè)置pathRewrite:{'^/api':' '}后,最終代理訪問的路徑為 'http://www.baidu.com/login',這個參數(shù)的目的是重新命名后荠锭,在訪問時把命名刪除掉旱眯。
changeOrigin:這個參數(shù)可以讓target參數(shù)是域名。
secure:false证九,不檢查安全問題删豺。設(shè)置后接受運行在https上可以使用無效證書的后段服務(wù)器。
4愧怜、ngnix反向代理呀页,前端知道這個不需要前端做什么。
5拥坛、postMessage
6蓬蝶、scket.io實時通訊
7、webSocket協(xié)議跨域
8渴逻、document.domain+iframe
只能實現(xiàn):同一個主域疾党,不同子域之間的操作