快捷導(dǎo)航

Vite配置代理Proxy解決跨域問題小結(jié)

更新時(shí)間：2023年03月24日 09:24:21 作者：路過的假面騎士dcd

我們?cè)谧鲰?xiàng)目的時(shí)候經(jīng)常會(huì)遇到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于Vite配置代理Proxy解決跨域問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

我們?cè)诰帉懬岸隧?xiàng)目的時(shí)候，經(jīng)常會(huì)遇到跨域的問題，當(dāng)我們?cè)L問后端 API 的 URL 路徑時(shí)，只要域名、端口或訪問協(xié)議（如 HTTP 和 HTTPS）有一項(xiàng)不同，就會(huì)被瀏覽器認(rèn)定為跨域。另外我們也會(huì)經(jīng)常重復(fù)編寫后端的域名，例如 https://example.com/api/some_end_point，https://example.com/api/other_end_point，針對(duì)這兩種情況，可以直接用同一個(gè)配置來解決，即代理配置。?

不管是 Vite 還是 Webpack，這些打包工具都支持設(shè)置前端代理，它們能夠把對(duì)某一段 URL 的訪問直接轉(zhuǎn)換成另一個(gè)真實(shí)的后端 API 地址，這樣前后端就視為使用了相同的域名、協(xié)議和端口，就避免了跨域的問題，還能避免繁瑣的反復(fù)編寫域名。

配置 Vite Proxy

我們這里以 Vite 的配置為例，來看一下如何給 API 請(qǐng)求設(shè)置代理。在 Vite 編寫的項(xiàng)目里邊，有一個(gè) vite.config.js配置文件，里邊是關(guān)于 Vite 的配置項(xiàng)，可以在里邊配置代理。假如我們前端項(xiàng)目路徑為 http://localhost:3000，需要代理所有以 /api 開頭的 API 請(qǐng)求，把它轉(zhuǎn)發(fā)到 http://localhost:3001，并且后端的 API 路徑中不帶 /api前綴，需要自動(dòng)去掉 /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/, ""),
      },
    },
  },
});

之后重啟項(xiàng)目就可以了

小結(jié)?

前端跨域問題其實(shí)是一個(gè)安全問題，就是為了防止不同域名的服務(wù)之間進(jìn)行互相訪問，以避免惡意程序?qū)蠖速Y源進(jìn)行非法獲取。在開發(fā)的時(shí)候，我們就可以利用代理來把請(qǐng)求進(jìn)行代理，把域名等改成一樣的，這樣就避免了跨越的問題。在 Vite 中設(shè)置代理，是在 vite.config.js配置文件里，配置 server屬性，并在里邊配置 proxy配置項(xiàng)。代理可以配置多個(gè)，根據(jù)不同的 API 路徑去請(qǐng)求不同的后端路徑，本文里只配置了一個(gè) /api作為演示。