vue3.0 proxy設(shè)置代理不成功的問題及解決方案
更新時(shí)間：2023年12月07日 15:38:18 作者：悠悠~飄
這篇文章主要介紹了vue3.0 proxy設(shè)置代理不成功的問題及解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
一.設(shè)置proxy
首先在項(xiàng)目中創(chuàng)建vue.config.js
注意在ts環(huán)境下仍為js結(jié)尾
項(xiàng)目配置詳情如下：
module.exports ={
devServer: {
open: false, // 是否自動彈出瀏覽器頁面
proxy: {
'/api': { // '/api'是代理標(biāo)識，用于告訴node，url前面是/api的就是使用代理的
target: "http://localhost:3000", //目標(biāo)地址，一般是指后臺服務(wù)器地址
changeOrigin: true, // 是否跨域
ws: true, // 是否代理 websockets
secure: false, // 是否https接口
// pathRewrite: { // pathRewrite 的作用是把實(shí)際Request Url中的'/api'用""代替 如果有則不需要此屬性
// '^/api': "/api"
// }
}
}
}
}二.問題出現(xiàn)
結(jié)果運(yùn)行依然報(bào)錯
三.解決方案
最后還是出現(xiàn)在axios的默認(rèn)基本路徑的配置和代理發(fā)生了沖突，代理本身是將請求基本路徑代理到目標(biāo)基本路徑
比如:
項(xiàng)目基本路徑是http:localhost:8080
axios 基本路徑卻設(shè)置為http:localhost:3000,
代理目標(biāo)路徑為：http:localhost:3000
此時(shí)項(xiàng)目啟動仍然報(bào)錯跨域
所以axios的基本路徑要么設(shè)置為項(xiàng)目啟動路徑http:localhost:8080要么設(shè)置為空
此時(shí)問題解決
到此這篇關(guān)于vue3.0 proxy設(shè)置代理不成功的文章就介紹到這了,更多相關(guān)vue3.0 proxy代理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解VUE中的插值( Interpolation)語法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果
這篇文章主要介紹了用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果,代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue 計(jì)算屬性 computed，一般情況下屬性都是放到data中的，但是有些屬性可能是需要經(jīng)過一些邏輯計(jì)算后才能得出來，那么我們可以把這類屬性變成計(jì)算屬性，下面我們來看看具體實(shí)例,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了vue?表格單選按鈕的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue 實(shí)現(xiàn)v-for循環(huán)回來的數(shù)據(jù)動態(tài)綁定id
今天小編就為大家分享一篇vue 實(shí)現(xiàn)v-for循環(huán)回來的數(shù)據(jù)動態(tài)綁定id，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue3?響應(yīng)式高階用法之customRef()的使用
customRef()是Vue3的高級工具,允許開發(fā)者創(chuàng)建具有復(fù)雜依賴跟蹤和自定義更新邏輯的ref對象,本文詳細(xì)介紹了customRef()的使用場景、基本用法、功能詳解以及最佳實(shí)踐,包括防抖、異步更新等用例,旨在幫助開發(fā)者更好地理解和使用這一強(qiáng)大功能2024-09-09
swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法
今天小編就為大家分享一篇swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue路由打開一個(gè)新的窗口的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue前端實(shí)現(xiàn)dhtmlxgantt甘特圖代碼示例(個(gè)人需求)
這篇文章主要介紹了如何使用dhtmlx-gantt和chinese-days插件在項(xiàng)目中實(shí)現(xiàn)節(jié)假日置灰顯示的功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
Vue.js 如何添加全局常量或變量? 這是最近一個(gè)同事問的問題，發(fā)現(xiàn)很多朋友對這塊不熟悉，所以下面這篇文章主要給大家介紹了關(guān)于Vue中定義全局變量與常量的各種方式，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08