Vue學習筆記（5）跨域

目錄跨域

解決proxytable 與 axios

在學習element ui的過程中，嘗試一下有界**的用法：

不出意外，遇到了跨域問題，感覺還是比較常見的，於是打算記錄一下方便日後學習。

瀏覽器的同源策略規定某域下的客戶端在沒明確授權的情況下，不能讀寫另乙個域的資源，而對於我們熟悉的前後端分離專案，前後端常常不在乙個伺服器內或者在乙個伺服器的不同埠下，前端想要獲取後端的資料，就必須發起請求，如果不做一些處理，就會受到瀏覽器同源策略的約束。

在開發環境中，有一種常見的解決vue中請求資料時跨域問題的方法。

問題類似如下，都是因為跨域問題導致的。

.....對於vuecli2的專案，在config資料夾下的index.js中找到proxytable欄位，新增如下型別的**即可：

dev: 
},csssourcemap: false
}

這樣相當於吧本地8080埠的乙個請求**到了這一網域名稱下。

有趣的是由於vuecli3的更新，專案中的index.js檔案被放在了專案依賴中，這時我們只需在根目錄下建立乙個"vue.config.js"檔案，把proxytable的部門放進去即可，對於我的專案：

/*
@date: 2019/8/7 0:39  @author: asen wang
@contact email: [email protected]
@content:
*/module.exports = ,
},},
},};

然而因為我使用的ts寫的該專案，在webstorm中建立該檔案時，我建立成了"vue.config.ts"，不出意外的無法載入，這個大家使用ts的也應該注意。

回到proxytable中，目標介面網域名稱，對於我來說就是""，同時我使用了axios，在vue檔案中如下配置：

created(),
methods: );
},},

注意的是，這裡我已經將""替換成了"/api"，同時我們要保證在dom渲染之前拿到資料，因此使用到了鉤子函式created()。

注意，這樣的方法在開發環境中使用即可，但是在生產環境中應該另尋他法，這是後話了。

Vue學習筆記（5） 跨域