Vite代理如何解決跨域問(wèn)題詳解
前言
我們?cè)诰帉?xiě)前端項(xiàng)目的時(shí)候，經(jīng)常會(huì)遇到跨域的問(wèn)題，當(dāng)我們?cè)L問(wèn)后端 API 的 URL 路徑時(shí)，只要域名、端口或訪問(wèn)協(xié)議（如 HTTP 和 HTTPS）有一項(xiàng)不同，就會(huì)被瀏覽器認(rèn)定為跨域。另外我們也會(huì)經(jīng)常重復(fù)編寫(xiě)后端的域名，例如 https://example.com/api/some_end_point，https://example.com/api/other_end_point，針對(duì)這兩種情況，可以直接用同一個(gè)配置來(lái)解決，即代理配置。
不管是 Vite 還是 Webpack，這些打包工具都支持設(shè)置前端代理，它們能夠把對(duì)某一段 URL 的訪問(wèn)直接轉(zhuǎn)換成另一個(gè)真實(shí)的后端 API 地址，這樣前后端就視為使用了相同的域名、協(xié)議和端口，就避免了跨域的問(wèn)題，還能避免繁瑣的反復(fù)編寫(xiě)域名。
1.Vite Proxy
我們這里以 Vite 的配置為例，來(lái)看一下如何給 API 請(qǐng)求設(shè)置代理。在 Vite 編寫(xiě)的項(xiàng)目里邊，有一個(gè) vite.config.js配置文件，里邊是關(guān)于 Vite 的配置項(xiàng)，可以在里邊配置代理。假如我們前端項(xiàng)目路徑為 http://localhost:3000，需要代理所有以 /api 開(kāi)頭的 API 請(qǐng)求，把它轉(zhuǎn)發(fā)到 http://localhost:3001，并且后端的 API 路徑中不帶 /api前綴，需要自動(dòng)去掉 /api前綴，如下圖所示：
下面是端口從5173代理到8080
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8080', //目標(biāo)url
changeOrigin: true, //支持跨域
rewrite: (path) => path.replace(/^\/api/, ""),
//重寫(xiě)路徑,替換/api
}
}
}
})注意我先配置了axios的baseurl
// 請(qǐng)求
const service = axios.create({
baseURL: '/api',
timeout: 10000
})
也就是說(shuō) 我請(qǐng)求request.get("/all") ，會(huì)解析成http://127.0.0.1:5173/api/all。
這里我請(qǐng)求http://127.0.0.1:5173/api/all 這是前端的請(qǐng)求。
http://127.0.0.1:8080/all 這里對(duì)應(yīng)后端的接口。
前端
后端
2.參考文章
總結(jié)
到此這篇關(guān)于Vite代理如何解決跨域問(wèn)題的文章就介紹到這了,更多相關(guān)Vite代理解決跨域問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vuex(vue狀態(tài)管理)的特殊應(yīng)用案例分享
Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。2020-03-03
這篇文章主要介紹了Vue一個(gè)案例引發(fā)的遞歸組件的使用，本文主要給大家展示如何在項(xiàng)目中使用遞歸組件，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
vue-simple-uploader上傳成功之后的response獲取代碼
這篇文章主要介紹了vue-simple-uploader上傳成功之后的response獲取代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧~2020-09-09
這篇文章主要介紹了vue項(xiàng)目安裝使用vconsole方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
vue基于element-ui的三級(jí)CheckBox復(fù)選框功能的實(shí)現(xiàn)代碼
最近vue項(xiàng)目需要用到三級(jí)CheckBox復(fù)選框，需要實(shí)現(xiàn)全選反選不確定三種狀態(tài)。這篇文章主要介紹了vue基于element-ui的三級(jí)CheckBox復(fù)選框功能的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-10-10
最近一段時(shí)間，一直在做主題方面的工作。我們的主題，并不是簡(jiǎn)單切換一下顏色，或者排版變化這些，而是變化比較大的主題。比如說(shuō)：主題1和主題2看起來(lái)完全不一樣，功能甚至都不一樣。這樣，通過(guò)切換css就無(wú)法做到了，因此我思考良久，使用了如下2種方法2021-06-06
vue中動(dòng)態(tài)路由加載組件,找不到module問(wèn)題及解決
這篇文章主要介紹了vue中動(dòng)態(tài)路由加載組件,找不到module問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹在Vue中是如何封裝axios的相關(guān)資料，axios的封裝主要是幫助我們簡(jiǎn)化代碼和利于后期的更新維護(hù)，感興趣的小伙伴可以和小編一起來(lái)閱讀下面文章的具體內(nèi)容2021-10-10
vue的axios請(qǐng)求改變content-type為form-data問(wèn)題
這篇文章主要介紹了vue的axios請(qǐng)求改變content-type為form-data問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
element-ui帶輸入建議的input框踩坑(輸入建議空白以及會(huì)閃出上一次的輸入建議問(wèn)題)
這篇文章主要介紹了element-ui帶輸入建議的input框踩坑(輸入建議空白以及會(huì)閃出上一次的輸入建議問(wèn)題)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01