看了慕課網曉風輕老師的視頻，做下筆記。
引起跨域的原因：
1、瀏覽器限制；
2、跨域（協議、域名，端口不一樣都是跨域，即違反同源策略）；
3、XHR（XMLHttpRequest請求）；
同時滿足以上三個條件就會產生跨域。
解決跨域的方法：
1.禁止瀏覽器做檢查校驗
在瀏覽器屬性里加上 --disable-web-security --user-data-dir
2.jsonp
不是一個官方協議，是利用script標籤請求可以跨域來解決跨域問題（帶url/href的標籤都不會受同源策略的影響，eg：link、img、script等）。這個script創建完使用完就銷燬了，html裏不可見（可以通過對jq源碼打斷點去查看，大概在9800行）
jsonp的實現原理是：請求類型爲script來避開跨域，前後臺約定帶有“callback”這個參數的請求就是jsonp請求，前臺發出去的請求加了“callback”參數，當後臺發現請求中帶“callback”時，後臺就知道這是一個jsonp請求，就會把返回的數據由json變成JS代碼返回，JS代碼內容就是一個函數的調用，函數名是“callback”參數的值，而原來需要返回的json對象數據在這裏作爲參數傳遞返回。後面的“_”表示不緩存。
缺點：
-
服務器需要改動代碼支持（因爲服務器正常會返回json數據，而瀏覽器會以解析js的方式去解析服務器返回的數據，那麼結果就會報錯）
-
只支持GET方法，JSONP是通過動態創建一個script發送請求的，而script只支持GET方法
3.CORS
CROS重點就在服務器上，只要配置了允許CROS，就可以正常發送請求，非常方便且安全性好，具體的服務器配置取決於服務端的不同實現。
瀏覽器發現請求是跨域的時候，會在請求頭上加上origin: 域名，當請求返回時，就會檢查響應頭裏面有沒有允許跨域的信息，沒有的話就報錯。
那麼我們只要在服務器上加上如下代碼即可：
res.addHeader("Access-Control-Allow-Origin ", "http://localhost:8081");//*代表所有域
Access-Control-Allow-Methods,"get" //*代表所有方法
複雜請求
當瀏覽器要發送跨域請求時，如果是簡單請求，就是先執行後判斷，如果是複雜請求，瀏覽器會先發送一個options預檢命令即一個options請求，當該請求通過時纔會再發送真正的請求。如下，發送兩個請求
該option請求會根據請求的信息去詢問服務端支不支持該請求。比如發送的數據是json類型（通過content-type設置）的話，會攜帶一個請求頭Access-Control-Request-Headers: content-type去詢問支不支持該數據類型，如果支持（res.addHeader("Access-Control-Allow-Headers ", "Content-Type")），則請求就會通過，併發送真正的請求
可以通過將預檢命令緩存來減少請求
設置方法是服務端響應頭設置Access-Control-Max-Age，值是緩存時間
帶cookie的跨域（發送的cookie只能是被調用方的cookie，而不是調用方的cookie）
前面設置響應頭Access-Control-Allow-Origin: *，可以解決跨域，但是在帶cookie的跨域請求中就不能試用了，origin必須是全匹配，而之前說了請求頭裏面會帶有origin，那我們把這個值獲取下，就可以做完全匹配了。此外帶cookie的跨域還需要在響應頭中設置Access-Control-Allow-Credentials的值爲true
4.服務器代理
調用方修改Apache或者Nginx靜態服務器，通過靜態服務器隱藏調用請求返回給瀏覽器，在瀏覽器視角來看，還是同源訪問，自然也就不存在跨域的問題了。
-----
其他方案：document.domain、window.name、location.hash、postMessage、websocket協議等（先記錄下~~~）