第一種JSONP方式

舉列說明，比如我想向一個天氣接口獲取數據，但是我當前的域名和天氣這個接口的域名不一樣，它想把自己的瀏覽器接口提供給別人用，我也想用它的接口，但是瀏覽器會它給阻止掉，那么如何繞過瀏覽器，去實現這個功能呢。
<script src="http://weather.com.cn?city=hangzhou"></script>
script 標簽里src，不管內容是什么，無外乎都是向這個內容，發送請求，把數據拿過來之后作為js去執行。但是

{
  city: 'hangzhou'，
  weather: {...}
} 

這樣js肯定是會報錯的，即使不報錯，也沒有辦法將它展示頁面上。因此接口里面必須要有

showWeather({
city: 'hangzhou',
weather: {}
})

以及寫js的時候里面聲明了函數

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跨域請求資源的方式，支持現代瀏覽器，IE支持10以上。實現方式很簡單，當你使用XMLHttpRequest 發送請求時，瀏覽器發現該請求不符合同源策略，會給該請求加一個請求頭: Origin, 后臺進行一系列處理，如果確定接受請求則在返回結果中加入一個響應頭: Access-Control-Allow-Origin; 瀏覽器判斷該相應頭中是否包含Origin的值，如果有則瀏覽器會處理響應，我們就可以拿到響應數據，如果不包含瀏覽器直接駁回，這時我們無法拿到響應數據，所以CORS的表象是讓你覺得它與同源的ajax請求沒啥區別，代碼完全一樣。html里面script里面就是普通的ajax請求，而在服務端加了一條
res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080");
意思就是這個url發送的ajax我是給你數據的。
res.header("Access-Control-Allow-Origin", "*");
不管域名是什么，瀏覽器都放行。

第三種方式降域（iframe）

那是因為你當前的域名是a.jrg.com而你iframe里面的域名是b.jrg.com。
這個時候，你在當前頁面操作iframe里面的東西，是有問題的，會被阻止掉。這是瀏覽器的另一種同源策略，防止你在不同源下操作iframe里面的內容。
針對這種方式，降域。
名下有兩個網站，對應的祖域名是一樣的，而二級域名不一樣，這兩個網站實現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

我不可以操作你的頁面，但是我可以給你這個頁面發送一些消息。
假設iframe里面的域名認可這個消息，那么iframe就可以接受這個消息。
同時iframe也可以向外面發送一些消息，如果你也認可它，那你也可以拿這個消息去處理。那這樣就實現了二者的一個交互。
對于不同域下，我可以向他發送一些數據，如果對方接受了這個數據，那么就可以去用它。如果對方沒有接受它，那么就沒有任何的作用。
舉列說明

// a.html
<div class="ct">
    <h1>使用postMessage實現跨域</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>