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