詳解Vue-cli 創(chuàng)建的項目如何跨域請求
更新時間：2017年05月18日 09:09:04 作者：WiseWrong
本篇文章主要介紹了詳解Vue-cli 創(chuàng)建的項目如何跨域請求 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
問題描述：
使用 Vue-cli 創(chuàng)建的項目，開發(fā)地址是 localhost:8023，需要訪問 localhost:9000 上的接口
分析原因：
不同域名之間的訪問，需要跨域才能正確請求。跨域的方法很多，通常都需要后臺配置
不過 Vue-cli 創(chuàng)建的項目，可以直接利用 Node.js 代理服務器，實現(xiàn)跨域請求
解決方案：
接口地址原本為 /form/save，但是為了匹配代理地址，在前面加一個 /api
如果使用了 axios，可以全局配置一個 baseURL，這樣就不用挨個兒修改 url 了
axios.defaults.baseURL = '/api'
在 config>index.js 的 dev 中添加配置項 proxyTable：
proxyTable: {
'/api': {
target: 'http://127.0.0.1:9000/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
其中 '/api' 為匹配項，target 為被請求的地址
因為在 ajax 的 url 中加了前綴 '/api'，而原本的接口是沒有這個前綴的
所以需要通過 pathRewrite 來重寫地址，將前綴 '/api' 轉(zhuǎn)為 '/'
如果本身的接口地址就有 '/api' 這種通用前綴，就可以把 pathRewrite 刪掉
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue中的高德軌跡回放問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了element ui table 增加篩選的方法示例，詳細的介紹了如何添加規(guī)則內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
Vue使用v-viewer插件實現(xiàn)圖片預覽和縮放和旋轉(zhuǎn)等功能(推薦)
v-viewer是一個基于viewerjs封裝的vue圖片預覽組件,有預覽縮放拉伸旋轉(zhuǎn)切換拖拽等功能,支持配置化，這篇文章主要介紹了Vue使用v-viewer插件實現(xiàn)圖片預覽和縮放和旋轉(zhuǎn)等功能,需要的朋友可以參考下2023-02-02
解決vue elementUI中table里數(shù)字、字母、中文混合排序問題
這篇文章主要介紹了vue elementUI中table里數(shù)字、字母、中文混合排序問題,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
vue.js利用defineProperty實現(xiàn)數(shù)據(jù)的雙向綁定
本篇文章主要介紹了用Node.js當作后臺、jQuery寫前臺AJAX代碼實現(xiàn)用戶登錄和注冊的功能的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要給大家分享的是Vue3的幾個優(yōu)勢，Vue3仍然在源碼、性能和語法 API 三個大的方面進行了優(yōu)化，下面我們一起進入文章看看具體詳情吧2021-10-10
elementui實現(xiàn)表格(el-table)默認選中功能
這篇文章主要介紹了elementui實現(xiàn)表格(el-table)默認選中功能,本文給大家分享實現(xiàn)思路結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2024-07-07
這篇文章主要介紹了Vue-cli3多頁面配置詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
在寫vue項目時,有個需求是點擊表格中某一行的下載按鈕,然后開始下載這一行對應的文件,所以本文小編給大家介紹了使用vue3實現(xiàn)點擊按鈕下載文件功能,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-01-01
uniapp如何打包到H5并成功發(fā)布,以及在打包過程中會遇到的坑如何解決,本文將一一講解,文中通過圖文結(jié)合的方式給大家講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-10-10