Vue專案 前後端分離模式解決開發環境的跨域問題
阿新 • • 發佈:2018-12-04
在前後端分離的web開發中,我們與後臺聯調時,會遇到跨域的問題。
比如:
開發地址是 localhost:8080,需要訪問 localhost:9000 上的介面。
不同域名之間的訪問,需要跨域才能正確請求。跨域的方法很多,在 Vue-cli 建立的專案中,可以直接利用 Node.js 代理伺服器,實現跨域請求。
解決方法:
- 安裝axios
- 在main.js中全域性配置一個 baseURL,這樣就不用挨個修改 url 了,它的作用是作為一個攔截器,當請求地址匹配到這個上下文,就可對請求做代理跨域
3.在 config -index.js 的 dev 中新增配置項 proxyTable:
其中:
'/apis' 為匹配項,匹配攔截
target 為被請求的地址(開發中通常是後臺介面釋出地址)
pathRewrite為重寫配置,因為在 ajax 的 url 中加了字首 '/apis',而原本的介面是沒有這個字首的,所以需要通過 pathRewrite 來重寫地址,將字首 '/apis' 轉為 '';
如果本身的介面地址就有 '/apis' 這種通用字首,就可以把 pathRewrite 刪掉。
Heads為https地址,需要https請求的時候才需要設定。