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