vue解決跨域問題

一.什麼是跨域

　　跨域問題的出現是由於瀏覽器的同源策略問題，所謂同源:就是兩個頁面具備相同的協議（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，但並不影響咱們請求數據。