同源策略
- 瀏覽器出于安全考慮，只允許相同域之間的接口相互傳輸數(shù)據(jù)，不同源客戶端腳本在沒有授權(quán)允許的情況下不能訪問對(duì)方資源
- 同源即：協(xié)議相同，域名相同，端口相同。（有一個(gè)不同即為跨域）
實(shí)現(xiàn)跨域的方法
1 jsonp
- HTML中的script標(biāo)簽具有訪問其他域下js的能力，可以實(shí)現(xiàn)跨域訪問，但也需要服務(wù)器端支持
- 具體實(shí)現(xiàn)方式：1 創(chuàng)建數(shù)據(jù)處理函數(shù)（function）2 在script標(biāo)簽中的請(qǐng)求路徑后添加callback=function（url?callback=function）3服務(wù)器在接收到請(qǐng)求后返回 function（data）4 瀏覽器接受到數(shù)據(jù)后會(huì)執(zhí)行script標(biāo)簽中的js，調(diào)用function，就達(dá)到處理數(shù)據(jù)的目的
- 后端實(shí)現(xiàn)代碼(基于express框架)
var express = require('express');
var app = express();
app.get('/a',function(req,res){
var callback = req.query.callback;
if(callback){
res.send(callback+'("data")')
}else{
res.send("abc")
}
})
app.listen(3000)
console.log('success')
2 cores
- ORS 全稱是跨域資源共享（Cross-Origin Resource Sharing），是一種 ajax 跨域請(qǐng)求資源的方式，支持現(xiàn)代瀏覽器，IE支持10以上。 實(shí)現(xiàn)方式，當(dāng)你使用 XMLHttpRequest 發(fā)送請(qǐng)求時(shí)，瀏覽器發(fā)現(xiàn)該請(qǐng)求不符合同源策略，會(huì)給該請(qǐng)求加一個(gè)請(qǐng)求頭：Origin，后臺(tái)進(jìn)行一系列處理，如果確定接受請(qǐng)求則在返回結(jié)果中加入一個(gè)響應(yīng)頭：Access-Control-Allow-Origin; 瀏覽器判斷該相應(yīng)頭中是否包含 Origin 的值，如果有則瀏覽器會(huì)處理響應(yīng)，我們就可以拿到響應(yīng)數(shù)據(jù)，如果不包含瀏覽器直接駁回，這時(shí)我們無法拿到響應(yīng)數(shù)據(jù)。所以 CORS 的表象是讓你覺得它與同源的 ajax 請(qǐng)求沒啥區(qū)別，代碼完全一樣。
- 后端代碼實(shí)現(xiàn)
var express = require('express');
var app = express();
app.get('/a',function(req,res){
var callback = req.query.callback;
if(callback){
res.send(callback+'(data)')
}else{
res.header("Access-Control-Allow-Origin","*")
res.send("abc")
}
})
app.listen(3000)
console.log('success')
3 降域
a.html
<div class="ct">
<h1>使用降域?qū)崿F(xiàn)跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.ji.com:8080/a.html">
</div>
<iframe src="http://b.ji.com:8080/b.html" frameborder="0" ></iframe>
</div>
<script>
document.querySelector('.main input').addEventListener('input', function(){
window.frames[0].document.querySelector('input').value = this.value;
})
document.domain = "ji.com"
</script>
b.html
<body>
<input id="input" type="text" placeholder="http://b.ji.com:8080/b.html">
<script>
document.querySelector('#input').addEventListener('input', function(){
window.parent.document.querySelector('input').value = this.value;
})
document.domain = 'ji.com';
</script>
</body>
4 postMessage
a.html
<body>
<div class="ct">
<h1>使用postMessage實(shí)現(xiàn)跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.ji.com:8080/a.html">
</div>
<iframe src="http://b.ji.com:8080/b.html" frameborder="0" ></iframe>
</div>
<script>
$('.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>
</body>
b.html
<body>
<input id="input" type="text" placeholder="http://b.ji.com:8080/b.html">
<script>
$('#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>
</body>
- 降域與postMessage主要是實(shí)現(xiàn)父子頁(yè)面之間的通信
