概念
首先什么是跨域，簡單地理解就是因為JavaScript同源策略的限制，a.com 域名下的js無法操作b.com或是c.a.com域名下的對象，也就是不同域名之間相互訪問。比如我們在本地訪問一個其他服務器上的接口時往往出現下面的情況： 
這就說明出現了跨域問題。下面我先說明幾個概念
同源策略
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。
- 所謂同是指：
- 域名相同
- 協議相同
- 端口號相同
| URL | 說明 | 是否允許通信 |
|---|---|---|
| http://www.a.com/a.js http://www.a.com/b.js |
同一域名下 | 允許 |
| http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同一域名下不同文件夾 | 允許 |
| http://www.a.com：8000/a.js http://www.a.com/b.js |
同一域名，不同端口 | 不允許 |
| http://www.a.com/a.js https://www.a.com/b.js |
同一域名，不同協議 | 不允許 |
| http://www.a.com/a.js https://123.456.78.9/b.js |
域名不同 | 不允許 |
| http://www.a.com/a.js https://script.a.com/b.js |
主域相同，子域不同 | 不允許 |
| http://www.a.com/a.js https://a.com/b.js |
同一域名，不同二級域名 | 不允許 |
跨域問題就是違背了同源策略
ajax
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。傳統網頁在更新網頁內容時哪怕是很小一部分都需要重載整個頁面。但是使用ajax之后，通過在后台與服務器進行少量數據交換，實現異步更新，也就是可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。簡單粗暴的說就是我們利用ajax從從后台訪問數據，這就牽扯到了一個問題，跨域問題！
跨域
跨域的概念剛才簡單介紹了，舉個例子吧：
如果在A網站中，我們希望使用Ajax來獲得B網站中的特定內容，如果A網站與B網站不在同一個域中，那么就出現了跨域訪問問題，你可以理解為兩個域名之間不能跨過域名來發送請求或者請求數據，否則就是不安全的。但是解決的方式呢：
- 解決跨域問題的方法
- jsonp
- iframe跨域
- html5中的postMessage（）方法
- 服務器代理
- 設置cors
jsonp方式
JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域數據訪問的問題。原諒我簡單粗暴來代碼：
function findWeather () { var city = document.getElementById('city').value; var src = "http://api.jisuapi.com/weather/query?appkey=21f4782df8c57e19&city=" + city + "&callback=getData"; addScriptTag(src); } function getData (data) { console.log(data); } function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); }iframe、img、style、script等元素的src屬性可以直接向不同域請求資源，jsonp正是利用script標簽跨域請求資源的簡單實現，所以這個和jsonp本質一樣，同樣需要服務端請求返回callback…形式。具體處理就是在向接口傳遞參數的時候創建一個script標簽，將src屬性賦予請求的url，並將參數容納進去，外加一個callback參數，接下來做的就是創建一個callback函數，賦予形參一個變量，在函數中對這個變量進行處理，因為這個就是返回的結果。
jquery對ajax方法進行了完美的封裝，我們直接調用就可以啦。
$.ajax({
type : 'GET', dataType : 'jsonp', data : { city : city, appkey : '21f4782df8c57e19' }, url : "http://api.jisuapi.com/weather/query", success : function (data){ console.log(data); } });iframe方式
這種方法主要針對於父子頁面的情況，我指的是主域名相同而父域名不同的情況，比如像這兩個頁面：http://www.a.com/a.html 和 http://script.a.com/b.html 將這兩個頁面的document.domain都指向主域，用於同一主域下的不同子域之間的跨域請求，來上代碼吧：
//http://www.a.com/a.html document.domain = 'a.com'; var ifr = document.createElement('iframe'); ifr.src = 'http://script.a.com/b.html'; ifr.style.display = 'none'; document.boody.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; console.log(doc);//獲取到的頁面數據 //http://script.a.com/b.html document.domain = 'a.com';postMessage()
postMessage（）允許來自不同源的腳本采用異步方式進行通信，可以實現跨域消息傳遞。
postMessage（data，origin）
data：要傳遞的數據
origin：指明目標窗口的源。協議主機端口號
接收消息：監聽window的message事件，包括
data——傳遞過來的message
source——發送消息的窗口對象
origin——發送消息窗口的源
服務器代理
相當於在后端將我們想要的數據獲取下來至代理服務器上，然后傳給前端，因為http請求是在服務器端進行的而服務端是不受同源策略的限制的，所以服務器代理也是一個好的方法。
設置cors
在服務端利用Access-Control-Allow-Origin響應頭解決。
設置Access-Control-Allow-Origin：*，允許所有域名的腳本訪問該資源。
設置Access-Control-Allow-Origin：…允許特定域名訪問。
缺點比較
jsonp
jsonp的原生實現只能使用get請求，這也就造成了一些不安全因素，但是jquery ajax是支持post請求的。
crossDomain: true,//如果不設置這個即使寫的是post請求也會自動變成get dataType: json, type: 'POST'iframe
有一定限制，只能用於同一主域名不同子域名之間的請求。
服務器代理
增加服務器的負擔，且訪問速度慢
設置cors
兼容性不太好，比如對於一些老式瀏覽器是不支持的，這種情況下就適合使用jsonp來處理