vue3.0 proxy設(shè)置代理不成功的問題及解決方案
一.設(shè)置proxy
首先在項(xiàng)目中創(chuàng)建vue.config.js
注意在ts環(huán)境下仍為js結(jié)尾
項(xiàng)目配置詳情如下：
module.exports ={
devServer: {
open: false, // 是否自動(dòng)彈出瀏覽器頁(yè)面
proxy: {
'/api': { // '/api'是代理標(biāo)識(shí)，用于告訴node，url前面是/api的就是使用代理的
target: "http://localhost:3000", //目標(biāo)地址，一般是指后臺(tái)服務(wù)器地址
changeOrigin: true, // 是否跨域
ws: true, // 是否代理 websockets
secure: false, // 是否https接口
// pathRewrite: { // pathRewrite 的作用是把實(shí)際Request Url中的'/api'用""代替 如果有則不需要此屬性
// '^/api': "/api"
// }
}
}
}
}二.問題出現(xiàn)
結(jié)果運(yùn)行依然報(bào)錯(cuò)
三.解決方案
最后還是出現(xiàn)在axios的默認(rèn)基本路徑的配置和代理發(fā)生了沖突，代理本身是將請(qǐng)求基本路徑代理到目標(biāo)基本路徑
比如:
項(xiàng)目基本路徑是http:localhost:8080
axios 基本路徑卻設(shè)置為http:localhost:3000,
代理目標(biāo)路徑為：http:localhost:3000
此時(shí)項(xiàng)目啟動(dòng)仍然報(bào)錯(cuò)跨域
所以axios的基本路徑要么設(shè)置為項(xiàng)目啟動(dòng)路徑http:localhost:8080要么設(shè)置為空
此時(shí)問題解決
到此這篇關(guān)于vue3.0 proxy設(shè)置代理不成功的文章就介紹到這了,更多相關(guān)vue3.0 proxy代理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vite打包優(yōu)化CDN壓縮的分析實(shí)現(xiàn)
我們?cè)谌粘５墓ぷ髦锌隙〞?huì)遇到項(xiàng)目打包優(yōu)化等問題,本文主要介紹了vite打包優(yōu)化CDN壓縮的分析實(shí)現(xiàn),具有一定的參加價(jià)值,感興趣的可以了解一下2024-07-07
Flutter部件內(nèi)部狀態(tài)管理小結(jié)之實(shí)現(xiàn)Vue的v-model功能
本文是 Flutter 部件內(nèi)部狀態(tài)管理的小結(jié)，從部件的基礎(chǔ)開始，到部件的狀態(tài)管理，并且在過程中實(shí)現(xiàn)一個(gè)類似 Vue 的 v-model 的功能，感興趣的朋友跟隨小編一起看看吧2019-06-06
axios中post請(qǐng)求json和application/x-www-form-urlencoded詳解
Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的庫(kù),相比于原生的XMLHttpRequest對(duì)象,axios簡(jiǎn)單易用,下面這篇文章主要給大家介紹了關(guān)于axios中post請(qǐng)求json和application/x-www-form-urlencoded的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)的相關(guān)資料,echarts是一款基于JavaScript的開源可視化圖表庫(kù),它通過簡(jiǎn)單的配置即可實(shí)現(xiàn)各種各樣的可視化效果,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue之bus總線的簡(jiǎn)單使用解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue中el-tree動(dòng)態(tài)初始默認(rèn)選中和全選實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中el-tree動(dòng)態(tài)初始默認(rèn)選中和全選實(shí)現(xiàn)的相關(guān)資料,eltree默認(rèn)選中eltree是一種常用的樹形控件,通常用于在網(wǎng)頁(yè)上呈現(xiàn)樹形結(jié)構(gòu)的數(shù)據(jù),例如文件夾、目錄、組織結(jié)構(gòu)等,需要的朋友可以參考下2023-09-09
Vue路由之JWT身份認(rèn)證的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue路由之JWT身份認(rèn)證的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue3實(shí)現(xiàn)列表無限滾動(dòng)的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3實(shí)現(xiàn)列表無限滾動(dòng)的效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2023-07-07
Vue3實(shí)現(xiàn)富文本內(nèi)容導(dǎo)出為Word文檔
這篇文章主要為大家詳細(xì)介紹了Vue3如何通過純前端方案將富文本內(nèi)容直接導(dǎo)出為符合中文排版規(guī)范的 Word 文檔,有需要的小伙伴可以參考下2025-03-03
同時(shí)Vue也支持讓開發(fā)者,自己注冊(cè)一些指令,這些指令被稱為自定義指令,每個(gè)指令都有自己各自獨(dú)立的功能,這篇文章主要介紹了Vue自定義指令簡(jiǎn)介和基本使用,需要的朋友可以參考2024-03-03