詳解Vue-cli 創(chuàng)建的項(xiàng)目如何跨域請(qǐng)求
問題描述：
使用 Vue-cli 創(chuàng)建的項(xiàng)目，開發(fā)地址是 localhost:8023，需要訪問 localhost:9000 上的接口
分析原因：
不同域名之間的訪問，需要跨域才能正確請(qǐng)求?？缬虻姆椒ê芏?，通常都需要后臺(tái)配置
不過 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'，而原本的接口是沒有這個(gè)前綴的
所以需要通過 pathRewrite 來重寫地址，將前綴 '/api' 轉(zhuǎn)為 '/'
如果本身的接口地址就有 '/api' 這種通用前綴，就可以把 pathRewrite 刪掉
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決vue無法設(shè)置滾動(dòng)位置的問題 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了Vue使用預(yù)渲染代替SSR的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue addRoutes實(shí)現(xiàn)動(dòng)態(tài)權(quán)限路由菜單的示例
本篇文章主要介紹了vue addRoutes實(shí)現(xiàn)動(dòng)態(tài)權(quán)限路由菜單的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
詳解如何創(chuàng)建并發(fā)布一個(gè) vue 組件
這篇文章主要介紹了詳解如何創(chuàng)建并發(fā)布一個(gè)vue組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
html中引入Vue.js的cdn實(shí)現(xiàn)簡(jiǎn)單的文檔單頁
這篇文章主要為大家介紹了html中引入Vue.js的cdn實(shí)現(xiàn)簡(jiǎn)單的文檔單頁示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue子組件設(shè)計(jì)provide和inject理解使用
這篇文章主要為大家介紹了vue子組件設(shè)計(jì)provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue3?reactive數(shù)據(jù)更新視圖不更新問題解決
這篇文章主要為大家介紹了vue3?reactive數(shù)據(jù)更新視圖不更新問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
本篇文章主要介紹了vue事件修飾符和按鍵修飾符用法總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
在項(xiàng)目開發(fā)中,有兩個(gè)功能特別類似,如果單獨(dú)實(shí)現(xiàn),會(huì)有很多重復(fù)的代碼，這時(shí)候就會(huì)用到邏輯復(fù)用，本文主要介紹了vue3?邏輯復(fù)用的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下2024-02-02
Vue和SpringBoot之間傳遞時(shí)間的方法實(shí)現(xiàn)
本文主要介紹了Vue和SpringBoot之間傳遞時(shí)間的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07