1.什么是跨域？
跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源（廣義），但通常所說的跨域是狹義的，是由瀏覽器同源策略限制的一類請求場景。
2.什么是同源策略？
同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同。
3.跨域解決方案
（1）通過jsonp跨域
原理：動態添加一個<script>標簽，而script標簽的src屬性是沒有跨域的限制的。
<script type="text/javascript">
function jsonpCallback(res) { alert(res.msg); } </script>
<script type="text/javascript"src="http://xxx.com/xx?jsonp=jsonpCallback"></script>
一、原生實現：
<script>
var script = document.createElement('script'); script.type = 'text/javascript'; // 傳參並指定回調執行函數為callBack
script.src = 'http://xxxx.com?callback=callBack'; document.head.appendChild(script);// 回調執行函數
function callBack(res) { alert(JSON.stringify(res)); } </script>
服務端返回如下（返回時即執行全局函數）：
callBack({"status": true, "xxx": "xxx"})
二、jquery ajax:jq實現
$.ajax({ url: 'http://xxxx.com', type: 'get', dataType: 'jsonp', //請求方式為jsonp
jsonpCallback: "callBack",//自定義回調函數名
data: {} });
三、vue.js：vue實現
this.$http.jsonp('http://xxx.com', { params: {}, jsonp: 'callBack' }).then((res) => { console.log(res); })
JSONP的優點是：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運行，不需要XMLHttpRequest或ActiveX的支持；並且在請求完畢后可以通過調用callback的方式回傳結果。
JSONP的缺點則是：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題。
2、 document.domain + iframe跨域（僅限主域相同，子域不同的跨域應用場景）
實現原理：兩個頁面都通過js強制設置document.domain為基礎主域，就實現了同域；
（1）父窗口：(http://www.domain.com/a.html)
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script> document.domain = 'domain.com'; var res= 'data'; </script>
（2）子窗口：(http://child.domain.com/b.html)
<script> document.domain = 'domain.com'; // 獲取父窗口中變量
console.log('res' + window.parent.res); </script>
3、 location.hash + iframe
實現原理： a欲與b跨域相互通信，通過中間頁c來實現。 三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信。
1.a.html：(http://www.domain1.com/a.html) <iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe> <script> var iframe = document.getElementById('iframe'); //向b.html傳hash值 setTimeout(function() { iframe.src = iframe.src + '#user=admin'; }, 1000); //開放給同域c.html的回調方法 function onCallback(res) { alert('data from c.html ---> ' + res); } </script>
2.b.html：(http://www.domain2.com/b.html) <iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe> <script> var iframe = document.getElementById('iframe'); //監聽a.html傳來的hash值，再傳給c.html window.onhashchange = function () { iframe.src = iframe.src + location.hash; }; </script>
3.c.html：(http://www.domain1.com/c.html) <script> //監聽b.html傳來的hash值 window.onhashchange = function () { //再通過操作同域a.html的js回調，將結果傳回 window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', '')); }; </script>
4、 window.name + iframe跨域
window.name屬性的獨特之處：name值在不同的頁面（甚至不同域名）加載后依舊存在，並且可以支持非常長的 name 值（2MB）。
（1）a.html：(http://www.domain1.com/a.html)
var proxy = function(url, callback) { var state = 0; var iframe = document.createElement('iframe'); // 加載跨域頁面
iframe.src = url; // onload事件會觸發2次，第1次加載跨域頁，並留存數據於window.name
iframe.onload = function() { if (state === 1) { // 第2次onload(同域proxy頁)成功后，讀取同域window.name中數據
callback(iframe.contentWindow.name); destoryFrame(); } else if (state === 0) { // 第1次onload(跨域頁)成功后，切換到同域代理頁面
iframe.contentWindow.location = 'http://www.domain1.com/proxy.html'; state = 1; } }; document.body.appendChild(iframe); // 獲取數據以后銷毀這個iframe，釋放內存；這也保證了安全（不被其他域frame js訪問）
function destoryFrame() { iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); } }; // 請求跨域b頁面數據
proxy('http://www.domain2.com/b.html', function(data){ alert(data); }); （2）proxy.html：(http://www.domain1.com/proxy....
中間代理頁，與a.html同域，內容為空即可。 （3）b.html：(http://www.domain2.com/b.html)
<script> window.name = 'This is domain2 data!'; </script>
總結：通過iframe的src屬性由外域轉向本地域，跨域數據即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制，但同時它又是安全操作。
5、 postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數不多可以跨域操作的window屬性之一，它可用於解決以下方面的問題：
a.） 頁面和其打開的新窗口的數據傳遞
b.） 多窗口之間消息傳遞
c.） 頁面與嵌套的iframe消息傳遞
d.） 上面三個場景的跨域數據傳遞
用法：postMessage(data,origin)方法接受兩個參數
data： html5規范支持任意基本類型或可復制的對象，但部分瀏覽器只支持字符串，所以傳參時最好用JSON.stringify()序列化。
origin： 協議+主機+端口號，也可以設置為"*"，表示可以傳遞給任意窗口，如果要指定和當前窗口同源的話設置為"/"。
（1）a.html：(http://www.domain1.com/a.html)
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
var iframe = document.getElementById('iframe'); iframe.onload = function() { var data = { name: 'xxx' }; // 向domain2傳送跨域數據
iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com'); }; // 接受domain2返回數據
window.addEventListener('message', function(e) { alert('data from domain2 ---> ' + e.data); }, false); </script>
（2）b.html：(http://www.domain2.com/b.html)
<script>
// 接收domain1的數據
window.addEventListener('message', function(e) { alert('data from domain1 ---> ' + e.data); var data = JSON.parse(e.data); if (data) { data.number = 16; // 處理后再發回domain1
window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com'); } }, false); </script>
6、 跨域資源共享（CORS）
普通跨域請求：只服務端設置Access-Control-Allow-Origin即可，前端無須設置，若要帶cookie請求：前后端都需要設置。
需注意的是：由於同源策略的限制，所讀取的cookie為跨域請求接口所在域的cookie，而非當前頁。
目前，所有瀏覽器都支持該功能(IE8+：IE8/9需要使用XDomainRequest對象來支持CORS）)，CORS也已經成為主流的跨域解決方案。
1、 前端設置：
（1）原生ajax // 前端設置是否帶cookie
xhr.withCredentials = true; 示例代碼： var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端設置是否帶cookie
xhr.withCredentials = true; xhr.open('post', 'http://www.domain2.com:8080/login', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('canshu=xxx');
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } };
（2）jQuery ajax $.ajax({ ... xhrFields: { withCredentials: true // 前端設置是否帶cookie
}, crossDomain: true, // 會讓請求頭中包含跨域的額外信息，但不會含cookie
... });
（3）vue框架 1/axios設置： axios.defaults.withCredentials = true 2/vue-resource設置： Vue.http.options.credentials = true
7、 nginx代理跨域
8、 nodejs中間件代理跨域
9、 WebSocket協議跨域
后面三種參考該博主 https://segmentfault.com/a/1190000011145364 的nodejs相關介紹。