工作中總是遇到跨域問題，但是常常遇到了也不知道這是跨域導致的問題，或者知道了也還是不知道怎麼解決。於是，就找了各方資料作了以下分享。
首先，跨域的發生只是因為瀏覽器攔截了xhr的跨域請求，不讓我們拿到後台資料的是瀏覽器而不是後台。
細分下來，三個原因就是：
一、瀏覽器的限制
二、這是個xhr請求
三、跨域
同時滿足這三個才會出現跨域問題。
那麼，針對這三個問題我們來一一擊破，就可以解決跨域問題了。
一、修改瀏覽器的跨域設定
比較常用的是chrome瀏覽器，其跨域設定很簡單。
右擊chrome圖示——在屬性頁面中的目標輸入框裡加上 --disable-web-security 如下圖所示：
重新開啟chrome瀏覽器，如果瀏覽器頭部出現這行字說明配置成功啦，如圖：
但是問題來了，不能要求所有使用者的瀏覽器都配置成可跨域吧
二、把xhr請求，換成別的請求
1、 換成jsonp請求
jsonp是json padding，就是json的補充使用，不是json的官方協議但是也是乙個補充約定。
到底是啥，簡單來說就是前端傳送乙個jsonp的請求（請求中加乙個datatype欄位，值為jsonp）。
這個請求就變成了jsonp請求了。那麼請求的這個介面就變成了這樣：
是下面那個綠色的哦（上面那個是非jsonp請求，做個對比）。乙個是請求的type已經不是xhr了，而是script了（所以已經不構成跨域問題了），還有乙個區別是請求裡面多了callback引數。
同時，後台也要配置成可接受jsonp請求。為啥要配置，因為前端請求type變成了script了，前端需要的是js**所以後台再返回 json字串的話前端肯定要報錯了。
配置成這樣了之後，後台就會把原來的json 外麵包一層 函式，它就變成乙個可呼叫函式的js**了。
共同點是都有「callback」啊。沒錯，callback就是他們定的約定：如果前端請求時候加了callback引數，後台收到了就會自動把要返回的json物件轉化為scrip標籤的js函式。（這個script標籤我們在開發者模式裡找不到，因為他預設是動態建立的，呼叫完了會自動銷毀，要想快取也可以在後台**中額外配置的）。
但是，jsonp只支援get方法，而且它的請求方式不是xhr，意味著xhr它的非同步、屬性都不能使用，不方便啊。所以jsonp還是很少用的。
三、跨域解決，根本方法cors
cors是跨源資源分享（cross-origin resource sharing）的縮寫。它是w3c標準，是跨源ajax請求的根本解決方法。相比jsonp只能發get請求，cors允許任何型別的請求。
cors請求分為簡單請求和非簡單請求。
借鑑慕課網上大神以為大神根據個人經驗總結的結果：
1、 簡單請求
對於簡單請求，瀏覽器直接發出cors請求。就是瀏覽器發現這次跨源ajax請求是簡單請求，就自動在請求頭中，新增乙個origin欄位（只要跨域了，非簡單請求也會有這個字段）。如下：
origin欄位用來說明，本次請求來自哪個源（協議 + 網域名稱 + 埠）。伺服器根據這個值，決定是否同意這次請求。可設定為 * ，表示可匹配所有域。
對應的，瀏覽器會識別響應頭中access-control-allow-origin欄位，看和請求頭的origin值是否匹配。匹配了才允許其跨域訪問。響應頭的字段可以讓後端人配。
對應上文的請求頭，響應頭應該是access-control-allow-origin: http://localhost:8081
除此之外，還有：
access-control-allow-credentials表示在傳送請求時是否允許帶上cookie，這裡不僅要伺服器同意，並且我們在ajax請求中也要開啟withcredentials屬性。
關於cookie: 需要注意的是，如果要傳送cookie，access-control-allow-origin就不能設為星號，必須指定明確的、與請求網頁一致的網域名稱。
2、 非簡單請求
瀏覽器對簡單和非簡單請求的處理方式完全不一樣。一樣簡單請求會直接請求，然後在判斷請求頭和響應頭是否匹配。而非簡單請求，他會先執行乙個「預檢命令」先判斷請求頭和響應頭是否對應匹配，匹配成功後才會去請求真正的那個介面，否則就報錯了不會進行下一步請求。
後台要配置物件的響應頭：
**配置：
nginx和apatch配置。（這也是我們工作中常用的一種方法，其原理和cors方法類似，一般需要找運維配nginx，具體配置方法就沒深入研究了）
部分摘自：
vue跨域問題解決方法
vue跨域解決方法 vue專案中，前端與後台進行資料請求或者提交的時候，如果後台沒有設定跨域，前端本地除錯 的時候就會報 no access control allow origin header is present on the requested resource.這種跨域錯誤。要想本地正常的...
AJAX跨域問題解決方法
呼叫方解決跨域的方法只有一種，那就是隱藏跨域。何為隱藏跨域？隱藏跨域的核心思路是通過反向 隱藏跨域以欺騙瀏覽器 什麼是反向 反向 是指通過中間伺服器使得訪問同乙個網域名稱的兩個不同url最終會去往兩個不同的伺服器 一 反向 nginx配置 在之前的被呼叫方解決跨域中，訪問的請求是絕對位址，瀏覽器可以...
跨域問題解決
原文 當前端頁面與後台執行在不同的伺服器時，就必定會出現跨域這一問題，本篇簡單介紹解決跨域的三種方案，部分 截圖如下，僅供參考 方式一 使用ajax的jsonp 前端 伺服器 使用該方式的缺點 請求方式只能是get請求 方式二 使用jquery的jsonp外掛程式 前端 伺服器 使用該方式的特點 與...