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