跨域有幾種常見的方式?你有沒有跨域使用的經(jīng)驗症革?
方式: 使用jsonp實現(xiàn)跨域?使用cors實現(xiàn)跨域?瀏覽器另類的跨域機(jī)制(除了ajax發(fā)請求產(chǎn)生跨域春叫,還有幾種場景會涉及跨域)?
一泣港、瀏覽器的安全策略:同源策略
1暂殖、什么是同源
(1)同源(或本域)指:
- 同協(xié)議:如都是http或者h(yuǎn)ttps
- 同域名:如都是http://jirengu.com/a 和http://jirengu.com/b
- 同端口:如都是80端口
(2)實例:
同源 VS 不同源
A、同源当纱,如:
http://jirengu.com/a/b.js 和 http://jirengu.com/index.php
B呛每、不同源,即會產(chǎn)生跨域
協(xié)議不同: http://jirengu.com/main.js 和 https://jirengu.com/a.php
域名不同坡氯,域名必須完全相同才可以: http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php
端口不同,第一個是80:http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php
2莉给、同源策略
即 瀏覽器出于安全方面的考慮毙石,有時候只允許腳本與本域下的接口交互。
(1)頁面發(fā)請求時颓遏,當(dāng)前的url必須與接口的url對應(yīng)起來(三同原則)
(2)瀏覽器所需的安全策略場景:
不同源的客戶端腳本在沒有明確授權(quán)的情況下徐矩,不能讀寫對方的資源。
A叁幢、發(fā)請求:如發(fā)送一個ajax請求去獲取天氣滤灯,所發(fā)請求與當(dāng)前頁面所在域是屬于同域,請求響應(yīng)曼玩,瀏覽器則會接受該請求鳞骤。這屬于瀏覽器接受請求的安全策略。(如禁止瀏覽器的安全策略黍判,則不存在任何跨域)
B豫尽、嵌入iframe的內(nèi)聯(lián)頁面:涉及到用戶登錄的安全性,假如進(jìn)入一個含有內(nèi)聯(lián)頁面的主頁面中顷帖,JS若能操作內(nèi)頁交互美旧,獲取了內(nèi)頁中含有的用戶重要的信息,如支付信息等
總結(jié): 安全策略則遵循同源策略贬墩。對于當(dāng)前頁面來說頁面引入 JS 文件的域不重要榴嗅,重要的是加載該JS文件所在的域或url(執(zhí)行環(huán)境)。假如寫了一個頁面陶舞,引入了百度頁面的js或css等嗽测,并不存在什么跨域問題。同源所指的是js執(zhí)行環(huán)境的當(dāng)前頁面url肿孵,并不是js文件的地址
二唠粥、 跨域
1、跨域
跨域停做,是一種現(xiàn)象晤愧。繞過瀏覽器的同源策略獲取數(shù)據(jù)。怎么繞過呢雅宾?即直接沒有任何“三同”限制就能獲取數(shù)據(jù)养涮。
2、產(chǎn)生跨域
跨域的實例演示:修改host文件:給host文件 添加兩條記錄眉抬,這里使用a.com和b.com構(gòu)造一本機(jī)下的兩個不同域名平臺贯吓,方便跨域操作
//同本機(jī) 不同域名
127.0.0.1 a.com //瀏覽器url
127.0.0.1 b.com //接口url
3、出現(xiàn)疑問:
跨域是由誰產(chǎn)生蜀变?請求是否發(fā)出去悄谐?響應(yīng)是否產(chǎn)生?
A库北、現(xiàn)象:出現(xiàn)報錯爬舰,數(shù)據(jù)未返回看不到的三種情況:
第1種情況:請求未發(fā)出去们陆,瀏覽器攔截掉
第2種情況:請求發(fā)出去,服務(wù)器發(fā)現(xiàn)不一樣情屹,無響應(yīng)
第3種情況:請求發(fā)出去坪仇,服務(wù)器有響應(yīng),數(shù)據(jù)返回時垃你,瀏覽器發(fā)現(xiàn)數(shù)據(jù)未匹配
B椅文、實例演示第3種情況:
index.html:
//index.html
<h1>hello world</h1>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET','http://b.com:8080/getWeather', true)
xhr.send()
xhr.onload = function(){
console.log(xhr.responseText)
}
</script>
server.js
//server.js
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
http.createServer(function(req, res){
var pathObj = url.parse(req.url, true)
//console.log(pathObj)
switch (pathObj.pathname) {
case '/getWeather':
console.log('get Weather')/*執(zhí)行*/
res.end(JSON.stringify({beijing: 'sunny'}))
break;
default:
fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
if(e){
res.writeHead(404, 'not found')
res.end('<h1>404 Not Found</h1>')
}else{
res.end(data)
}
})
}
}).listen(8080)
而瀏覽器則打開:http://a.com:8080/index.html
出現(xiàn)報錯
即驗證第3種情況,請求發(fā)出去惜颇,終端上也獲得響應(yīng)皆刺,
但瀏覽器不接收該請求,也就無任何響應(yīng)
三凌摄、跨域主要操作
如何設(shè)置數(shù)據(jù)羡蛾,將數(shù)據(jù)“版權(quán)化”,從而告訴瀏覽器怎么是安全的锨亏,操作上保證安全痴怨。
1、JSONP操作跨域
(1)產(chǎn)生需求:
兩個網(wǎng)站屯伞,第一個網(wǎng)站要獲取第二個網(wǎng)站上的接口數(shù)據(jù)腿箩?如何實現(xiàn)這個需求
(2)定義:
jsonp豪直, 全稱是JSON with Padding劣摇,是為了解決跨域請求資源而產(chǎn)生的解決方案。
(3)如何使用jsonp:
HTML 中 script 標(biāo)簽可以加載其他域下的js弓乙,比如我們經(jīng)常引入一個其他域下線上cdn的jQuery末融。那如何利用這個特性實現(xiàn)從其他域下獲取數(shù)據(jù)呢?
可以先這樣試試:
<script src="http://api.jirengu.com/weather.php"></script>
這時候會向天氣接口發(fā)送請求獲取數(shù)據(jù)暇韧,獲取數(shù)據(jù)后做為js來執(zhí)行勾习。但這里有個問題, 數(shù)據(jù)是 JSON格式的數(shù)據(jù)懈玻,直接作為JS運(yùn)行的話應(yīng)該如何去得到這個數(shù)據(jù)來操作呢巧婶?
這樣試試:
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>
這個請求到達(dá)后端后,后端會去解析callback這個參數(shù)獲取到字符串showData涂乌,在發(fā)送數(shù)據(jù)做如下處理:
第1步:獲得后端數(shù)據(jù)支持:與后端先協(xié)商好數(shù)據(jù)艺栈,之前后端返回數(shù)據(jù): {"city": "hangzhou", "weather": "晴天"}
——現(xiàn)在后端返回數(shù)據(jù): showData({"city": "hangzhou", "weather": "晴天"})
第2步:前端script標(biāo)簽在加載數(shù)據(jù)后會把 「showData({“city”: “hangzhou”, “weather”: “晴天”})
」做為js來執(zhí)行,這實際上就是調(diào)用showData這個函數(shù)湾盒,同時參數(shù)是 {“city”: “hangzhou”, “weather”: “晴天”}
湿右。
第3步:用戶只需要在加載提前在頁面定義好showData這個全局函數(shù),在函數(shù)內(nèi)部處理參數(shù)即可罚勾。
<script>
function showData(ret){
console.log(ret);
}
</script>
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>
以上就是JSONP的方式毅人。
(4)實例演示:
后端要做的:(實質(zhì)上前端也可以模擬一些簡單數(shù)據(jù))
server.js:
//server.js
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
http.createServer(function(req, res){
var pathObj = url.parse(req.url, true)
/* 后端數(shù)據(jù)*/
switch (pathObj.pathname) {
case '/getNews':
var news = [
"第11日前瞻:中國沖擊4金 博爾特再戰(zhàn)200米羽球",
"正直播柴飚/洪煒出戰(zhàn) 男雙力爭會師決賽",
"女排將死磕巴西吭狡!郎平安排男陪練模仿對方核心"
]
res.setHeader('Content-Type','text/json; charset=utf-8')/*防止亂碼*/
/*支持跨域中的JSONP方法*/
if(pathObj.query.callback){
res.end(pathObj.query.callback + '(' + JSON.stringify(news) + ')')
}else{
res.end(JSON.stringify(news))
}
break;
default:
fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
if(e){
res.writeHead(404, 'not found')
res.end('<h1>404 Not Found</h1>')
}else{
res.end(data)
}
})
}
}).listen(8080)
前端要做的:shownews這個前端交互是url:localhost:8080/index.html或127.0.0.1:8080/index.html
//index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div class="container">
<ul class="news">
</ul>
<button class="show">show news</button>
</div>
/*使用script標(biāo)簽來定義一個jsonp的數(shù)據(jù)*/
<script>
$('.show').addEventListener('click', function(){
var script = document.createElement('script');
script.src = 'http://127.0.0.1:8080/getNews?callback=appendHtml';
document.head.appendChild(script);
document.head.removeChild(script);
})
function appendHtml(news){
var html = '';
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>';
}
console.log(html);
$('.news').innerHTML = html;
}
function $(id){
return document.querySelector(id);
}
</script>
</html>
啟動終端
$ node server.js
打開瀏覽器:localhost:8080/index.html或127.0.0.1:8080/index.html
看結(jié)果
總結(jié): 頁面所在的url為localhost:8080
或者127.0.0.1:8080
,而所請求數(shù)據(jù)接口為http://127.0.0.1:8080/getNews?callback=appendHtml
丈莺,如果直接作為獨立的數(shù)據(jù)接口請求(同源策略)會被瀏覽器拒絕划煮。JSONP方式就是通過 script 標(biāo)簽加載數(shù)據(jù)的方式去獲取數(shù)據(jù),然后將這個數(shù)據(jù)接口當(dāng)做 JS 代碼來執(zhí)行(實際是繞過了瀏覽器的同源策略缔俄,把數(shù)據(jù)直接通過script標(biāo)簽去執(zhí)行)般此。提前在頁面上聲明一個函數(shù),函數(shù)名通過接口傳參的方式傳給后臺牵现,后臺解析到函數(shù)名后在原始數(shù)據(jù)上「包裹」這個函數(shù)名铐懊,發(fā)送給前端,即JSONP 需要對應(yīng)接口的后端的配合才能實現(xiàn)瞎疼。
2科乎、CORS操作跨域
(1)cors是什么
CORS 全稱是跨域資源共享(Cross-Origin Resource Sharing),是一種 ajax 跨域請求資源的方式贼急,支持現(xiàn)代瀏覽器茅茂,IE支持10以上。
(2)假如同源同域下太抓,Ajax數(shù)據(jù)的獲取
前端:設(shè)置一個Ajax請求
//index.html
<!DOCTYPE html>
<html>
<body>
<div class="container">
<ul class="news">
</ul>
<button class="show">show news</button>
</div>
<script>
/*設(shè)置一個Ajax請求*/
$('.show').addEventListener('click', function(){
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:8080/getNews', true)/*請求的接口域名*/
xhr.send()
xhr.onload = function(){
appendHtml(JSON.parse(xhr.responseText))
}
})
function appendHtml(news){
var html = ''
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>'
}
$('.news').innerHTML = html
}
function $(selector){
return document.querySelector(selector)
}
</script>
</html>
后端:設(shè)置所需數(shù)據(jù)參數(shù)和同源策略:
//server.js
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
http.createServer(function(req, res){
var pathObj = url.parse(req.url, true)
switch (pathObj.pathname) {
case '/getNews':
var news = [
"第11日前瞻:中國沖擊4金 博爾特再戰(zhàn)200米羽球",
"正直播柴飚/洪煒出戰(zhàn) 男雙力爭會師決賽",
"女排將死磕巴西空闲!郎平安排男陪練模仿對方核心"
]
/*設(shè)置cors的數(shù)據(jù)參數(shù),以及同源同域*/
res.setHeader('Access-Control-Allow-Origin','http://localhost:8080')
//res.setHeader('Access-Control-Allow-Origin','*')
res.end(JSON.stringify(news))
break;
default:
fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
if(e){
res.writeHead(404, 'not found')
res.end('<h1>404 Not Found</h1>')
}else{
res.end(data)
}
})
}
}).listen(8080)
(3)如果不同域, Ajax本身也支持跨域走敌?瀏覽器又如何識別碴倾,看看CORS如何進(jìn)行跨域操作 :
實現(xiàn)方式很簡單,當(dāng)你使用XMLHttpRequest發(fā)送請求時掉丽,瀏覽器發(fā)現(xiàn)該請求不符合同源策略跌榔,會給該請求加一個請求頭:
Origin
,后臺進(jìn)行一系列處理捶障。如果確定接受請求則在返回結(jié)果中加入一個響應(yīng)頭:Access-Control-Allow-Origin
(用來判斷origin的請求地址)僧须。此時,瀏覽器通過Access-Control-Allow-Origin
的標(biāo)準(zhǔn)來判別 Origin
的值项炼,如果二者符合瀏覽器則會處理響應(yīng)担平,我們就可以拿到響應(yīng)數(shù)據(jù);如果Access-Control-Allow-Origin
不包含Origin
的值锭部,瀏覽器則直接駁回暂论,這時我們無法拿到響應(yīng)數(shù)據(jù)。
CORS 的表象操作讓你覺得它與同源的 ajax 請求沒啥區(qū)別空免,代碼完全一樣空另。
(4)假如,我們將setHeader改為以下:
res.setHeader('Access-Control-Allow-Origin','*')
相當(dāng)于在Access-Control-Allow-Origin
這個標(biāo)準(zhǔn)下允許任何接口url域名獲取本域下的數(shù)據(jù)蹋砚,如圖:
四扼菠、跨域其他操作
1摄杂、降域
http://b.jrg.com:8080/b.html)
內(nèi)嵌于主頁面(http://a.com:8080/a.html
)里,兩個頁面希望不報錯循榆,如何跨域析恢?
報錯:
(2)降域,即將主頁面降級秧饮,跨域操作映挂。
(3)方法:在代碼中添加
document.domain = "jrg.com
降域后解決:無論調(diào)哪個文件,只要是同jrg.com便能跨域
注:與文件名無關(guān)盗尸,和域名有關(guān)柑船。只要主頁面域名和內(nèi)嵌iframe中的域名一樣,a.html和b.html都能獲取
(4)實例演示:
2泼各、postMessage
(1)需求:主頁面中內(nèi)嵌一個頁面鞍时,內(nèi)嵌頁面需可交互使用且不報錯(除非主域相同),如何跨域操作扣蜻?瀏覽器需要提供一種機(jī)制允許此操作
(2)postMessage逆巍,即手動添加postMessage的參數(shù),允許主頁面?zhèn)鬟f該數(shù)據(jù)
(3)方法:在全局中添加一個
window.frames[0].postMessage(this.value,'*');
(4)實例演示:
a.html
//a.html
<html>
<style>
.ct{
width: 910px;
margin: auto;
}
.main{
float: left;
width: 450px;
height: 300px;
border: 1px solid #ccc;
}
.main input{
margin: 20px;
width: 200px;
}
.iframe{
float: right;
}
iframe{
width: 450px;
height: 300px;
border: 1px dashed #ccc;
}
</style>
<div class="ct">
<h1>使用postMessage實現(xiàn)跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.jrg.com:8080/a.html">
</div>
<iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>
</div>
<script>
//URL: http://a.jrg.com:8080/a.html
$('.main input').addEventListener('input', function(){
console.log(this.value);
window.frames[0].postMessage(this.value,'*');//* ,表示任何域下都可接受請求
})
window.addEventListener('message',function(e) {
$('.main input').value = e.data
console.log(e.data);
});
function $(id){
return document.querySelector(id);
}
</script>
</html>
b.html
//b.html
<html>
<style>
html,body{
margin: 0;
}
input{
margin: 20px;
width: 200px;
}
</style>
<input id="input" type="text" placeholder="http://b.jrg.com:8080/b.html">
<script>
// URL: http://b.jrg.com:8080/b.html
$('#input').addEventListener('input', function(){
window.parent.postMessage(this.value, '*');
})
window.addEventListener('message',function(e) {
$('#input').value = e.data
console.log(e.data);
});
function $(id){
return document.querySelector(id);
}
</script>
</html>