1. 程式人生 > >Vue專案 前後端分離模式解決開發環境的跨域問題

Vue專案 前後端分離模式解決開發環境的跨域問題

在前後端分離的web開發中,我們與後臺聯調時,會遇到跨域的問題。

比如:

開發地址是 localhost:8080,需要訪問 localhost:9000 上的介面。

不同域名之間的訪問,需要跨域才能正確請求。跨域的方法很多,在 Vue-cli 建立的專案中,可以直接利用 Node.js 代理伺服器,實現跨域請求。

解決方法:

  1. 安裝axios
  2. 在main.js中全域性配置一個 baseURL,這樣就不用挨個修改 url 了,它的作用是作為一個攔截器,當請求地址匹配到這個上下文,就可對請求做代理跨域

 

3.在 config -index.js 的 dev 中新增配置項 proxyTable:

其中:

'/apis' 為匹配項,匹配攔截

target 為被請求的地址(開發中通常是後臺介面釋出地址)

pathRewrite為重寫配置,因為在 ajax 的 url 中加了字首 '/apis',而原本的介面是沒有這個字首的,所以需要通過 pathRewrite 來重寫地址,將字首 '/apis' 轉為 '';

如果本身的介面地址就有 '/apis' 這種通用字首,就可以把 pathRewrite 刪掉。

Heads為https地址,需要https請求的時候才需要設定。