一.什麼是跨域

　　跨域問題的出現是因為瀏覽器的同源策略問題，所謂同源:就是兩個頁面具有相同的協議（protocol），主機（host）和埠號（port），它是瀏覽器最核心也是最基本的功能，如果沒有同源策略我們的瀏覽器將會十分的不安全，隨時都可能受到攻擊。

當我們請求一個介面的時候，出現如：Access-Control-Allow-Origin 字眼的時候說明請求跨域了

二.如何解決跨域問題

　　1.使用jsonp實現，網頁通過script標籤向伺服器請求json資料，伺服器受到請求後，將資料放在一個指定名字的回撥函式的引數裡面傳給前端。

<script src="http://www.test.com/getData?callback=getData"></script>//
 
 向伺服器test.com發出請求，該請求的查詢字串有一個callback引數，用來指定回撥函式的名字// 處理伺服器返回回撥函式的資料<script type="text/javascript">    // 伺服器返回的資料會放到回撥函式裡面    function getData(res){        // 處理獲得的資料        console.log(res.data)    }</script>

　　2.使用Jquery ajax實現，

$.ajax({  url: 'http://www.test.com:8888/getData',  type: 'get',  dataType: 
 
'jsonp',  // 請求方式為jsonp  jsonpCallback: "handleCallback",    // 自定義回撥函式名  data: {}})

　　3.在vue開發中實現跨域：在vue專案根目錄下找到vue.config.js檔案（如果沒有該檔案則自己建立），在proxy中設定跨域

 devServer: {    proxy: {  //配置跨域      '/api': {        target: 'http://121.121.67.254:8185/',  //這裡後臺的地址模擬的;應該填寫你們真實的後臺介面        changOrigin: true,  //允許跨域        pathRewrite: {          
 
/* 重寫路徑，當我們在瀏覽器中看到請求的地址為：http://localhost:8080/api/core/getData/userInfo 時            實際上訪問的地址是：http://121.121.67.254:8185/core/getData/userInfo,因為重寫了 /api           */          '^/api': ''         }      },    }  },

　　在vue中使用proxy進行跨域的原理是：將域名傳送給本地的伺服器（啟動vue專案的服務,loclahost:8080），再由本地的伺服器去請求真正的伺服器。

　　以下是我在開發vue專案中實現跨域的步驟：

　　1.在proxy中設定要訪問的地址，並重寫/api為空的字串，因為我們真正請求的地址是沒有帶/api，這個重寫很重要!!!

　　2.在建立axios例項的時候將baseURL設定為/api ,這時候我們的跨域就已經完成了。

　　3. 假如請求的真正地址為：http://121.121.67.254:8185/core/getdata/userInfo,但我們在瀏覽器上會看到是這樣的： http://localhost:8080/api/core/getData/userInfo ,多了個/api，但並不影響我們請求資料。