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