關(guān)于vite proxy跨域問(wèn)題的解決
vite proxy如何解決跨域問(wèn)題
場(chǎng)景描述
本地起了兩個(gè)服務(wù)
1.前端vue項(xiàng)目跑在http://localhost:5173端口
2.后端接口服務(wù)跑在http://localhost:3000端口
前端項(xiàng)目請(qǐng)求后端接口時(shí)，瀏覽器給出了跨域的提示，接口請(qǐng)求失敗。
下面給出通過(guò)配置前端代理解決跨域問(wèn)題方法
如果你是vite搭建的vue3項(xiàng)目，找到vite.config.ts，添加下面內(nèi)容：
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
}
},
})
關(guān)鍵的點(diǎn)來(lái)了，你的前端發(fā)起請(qǐng)求的baseUrl應(yīng)該是 http://localhost:5173/api
舉個(gè)例子：
前端要請(qǐng)求后端http://localhost:3000/userlist 接口，那么你發(fā)起的請(qǐng)求應(yīng)該是下面的樣子：
http://localhost:5173/api/userlist
這樣前端就是從相同的host 并且相同的port發(fā)起的請(qǐng)求，代理通過(guò)前綴"/api"匹配的你要轉(zhuǎn)發(fā)的請(qǐng)求，轉(zhuǎn)發(fā)到’http://localhost:3000’真正的后端服務(wù)，并且把多余的前綴給你替換掉。
vue3 vite3 解決復(fù)雜跨域
vue3在axios發(fā)送post請(qǐng)求時(shí)，容易遇到復(fù)雜跨域，會(huì)先發(fā)送options的預(yù)請(qǐng)求，再發(fā)送post請(qǐng)求，options請(qǐng)求搞了很久，無(wú)法被后端識(shí)別通過(guò)，只能想辦法用proxy代理解決
vite.config.js中添加一下代碼
export default defineConfig({
plugins: [
vue(),
],
server: {
host: '10.10.159.234',//本機(jī)ip
port: 8080,
//open: false, //自動(dòng)打開(kāi)
//base: "./ ", //生產(chǎn)環(huán)境路徑
proxy: {
'/api': {
target: 'http://10.56.33.13', //實(shí)際請(qǐng)求地址
changeOrigin: true,
//rewrite: (path) => path.replace(/^\/api/, '')根據(jù)自己api情況選擇這條
},
}
}
});
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-test-utils初使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要給大家介紹了關(guān)于vuex的數(shù)據(jù)渲染與修改的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了如何給element添加一個(gè)抽屜組件的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了Vue繪制雙Y軸折線柱狀圖實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
詳解vue中v-on事件監(jiān)聽(tīng)指令的基本用法
這篇文章主要介紹了詳解vue中v-on事件監(jiān)聽(tīng)指令的基本用法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
現(xiàn)在,很多登陸表單都會(huì)使用密碼加密,為登錄安全,登錄表單輸入密碼,會(huì)加密后傳入后臺(tái),本文就來(lái)介紹一下Vue3實(shí)現(xiàn)密碼加密登錄的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
Vue突然報(bào)錯(cuò)doesn‘t?work?properly?without?JavaScript?enabled
最近在做項(xiàng)目的時(shí)候遇到了些問(wèn)題,所以這篇文章主要給大家介紹了關(guān)于Vue突然報(bào)錯(cuò)doesn‘t?work?properly?without?JavaScript?enabled的解決方法,需要的朋友可以參考下2023-01-01
Vue?keepAlive實(shí)現(xiàn)不同的路由共用一個(gè)組件component的緩存問(wèn)題(推薦)
這篇文章主要介紹了Vue?keepAlive實(shí)現(xiàn)不同的路由共用一個(gè)組件component的緩存問(wèn)題,實(shí)現(xiàn)方式使用Vue?keepAlive實(shí)現(xiàn)頁(yè)面緩存，需要的朋友可以參考下2022-08-08
詳解Vue.js和layui日期控件沖突問(wèn)題解決辦法
這篇文章主要介紹了詳解Vue.js和layui日期控件沖突問(wèn)題解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析，技術(shù)點(diǎn)較多，所以篇幅較長(zhǎng)，認(rèn)真閱覽的你一定會(huì)學(xué)到很多知識(shí)，需要的朋友可以參考下2022-09-09