第一種JSONP方式
舉列說明，比如我想向一個天氣接口獲取數(shù)據(jù)，但是我當前的域名和天氣這個接口的域名不一樣，它想把自己的瀏覽器接口提供給別人用，我也想用它的接口，但是瀏覽器會它給阻止掉，那么如何繞過瀏覽器，去實現(xiàn)這個功能呢。
<script src="http://weather.com.cn?city=hangzhou"></script>
script 標簽里src，不管內容是什么，無外乎都是向這個內容，發(fā)送請求，把數(shù)據(jù)拿過來之后作為js去執(zhí)行。但是
{
city: 'hangzhou'，
weather: {...}
}
這樣js肯定是會報錯的，即使不報錯，也沒有辦法將它展示頁面上。因此接口里面必須要有
showWeather({
city: 'hangzhou',
weather: {}
})
以及寫js的時候里面聲明了函數(shù)
function showWeather(json) {
xxxx
}
這樣兩者的配合，才可以將實際所需要的展示在頁面上。
因此src需要修改成 <script src="http://weather.com.cn?city=hangzhou&callback=showWeather"></script>
因此我們可以這樣去做，偽代碼如下:
script.src = 'http://127.0.01/getNews?callback=appendHtml';
document.head.appendChild(script);
document.head.removeChild(script);
function appendHtml(news) {
}
服務端 router.js 需要添加
app.get('/getNews', function(req, res) {
...
...
...
...
var cb = req.query.callback;
if(cb) { // 如果callback存在
res.send(cb +'(' + JSON.stringify(data) + ')');
} else {
res.send(data);
}
// appendHtml(['1xxx', '2xxx'])
}
第二種方式cors
CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing）,是一種ajax跨域請求資源的方式，支持現(xiàn)代瀏覽器，IE支持10以上。實現(xiàn)方式很簡單，當你使用XMLHttpRequest 發(fā)送請求時，瀏覽器發(fā)現(xiàn)該請求不符合同源策略，會給該請求加一個請求頭: Origin, 后臺進行一系列處理，如果確定接受請求則在返回結果中加入一個響應頭: Access-Control-Allow-Origin; 瀏覽器判斷該相應頭中是否包含Origin的值，如果有則瀏覽器會處理響應，我們就可以拿到響應數(shù)據(jù)，如果不包含瀏覽器直接駁回，這時我們無法拿到響應數(shù)據(jù)，所以CORS的表象是讓你覺得它與同源的ajax請求沒啥區(qū)別，代碼完全一樣。html里面script里面就是普通的ajax請求，而在服務端加了一條
res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080");
意思就是這個url發(fā)送的ajax我是給你數(shù)據(jù)的。
res.header("Access-Control-Allow-Origin", "*");
不管域名是什么，瀏覽器都放行。
第三種方式降域（iframe）
那是因為你當前的域名是a.jrg.com而你iframe里面的域名是b.jrg.com。
這個時候，你在當前頁面操作iframe里面的東西，是有問題的，會被阻止掉。這是瀏覽器的另一種同源策略，防止你在不同源下操作iframe里面的內容。
針對這種方式，降域。
名下有兩個網(wǎng)站，對應的祖域名是一樣的，而二級域名不一樣，這兩個網(wǎng)站實現(xiàn)iframe嵌套，當有需求的時候可以采用降域的方法。
a1.html里面的內容
...
<iframe src="http://b.jrg.com:8080/b1.html" frameborder="0"></iframe>
<script>
document.domain = 'jrg.com';
</script>
// b.html 里面的內容
<script>
document.domain = 'jrg.com';
</script>
第四種跨域方式postMessage
我不可以操作你的頁面，但是我可以給你這個頁面發(fā)送一些消息。
假設iframe里面的域名認可這個消息，那么iframe就可以接受這個消息。
同時iframe也可以向外面發(fā)送一些消息，如果你也認可它，那你也可以拿這個消息去處理。那這樣就實現(xiàn)了二者的一個交互。
對于不同域下，我可以向他發(fā)送一些數(shù)據(jù)，如果對方接受了這個數(shù)據(jù)，那么就可以去用它。如果對方?jīng)]有接受它，那么就沒有任何的作用。
舉列說明
// a.html
<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>
// b.html
<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, '*');
// 不管post給誰都可以。
})
window.addEventListener('message',function(e) {
$('#input').value = e.data
console.log(e.data);
});
function $(id){
return document.querySelector(id);
}
</script>
