我們在編寫前端項目的時候，經(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é)議和端口，就避免了跨域的問題，還能避免繁瑣的反復編寫域名。
配置 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前綴，如下圖所示：
// vite.config.js
import { defineConfig } from "vite";
export default defineConfig({
server: {
proxy: {
"/api": {
target: "http://localhost:3001",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});之后重啟項目就可以了文章來源：http://www.zghlxwxcb.cn/news/detail-596644.html
小結(jié)?
前端跨域問題其實是一個安全問題，就是為了防止不同域名的服務(wù)之間進行互相訪問，以避免惡意程序?qū)蠖速Y源進行非法獲取。在開發(fā)的時候，我們就可以利用代理來把請求進行代理，把域名等改成一樣的，這樣就避免了跨越的問題。在 Vite 中設(shè)置代理，是在?vite.config.js配置文件里，配置?server屬性，并在里邊配置?proxy配置項。代理可以配置多個，根據(jù)不同的 API 路徑去請求不同的后端路徑，本文里只配置了一個?/api作為演示。文章來源地址http://www.zghlxwxcb.cn/news/detail-596644.html
到了這里，關(guān)于Vite 配置代理 Proxy，解決跨域的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
