快捷導(dǎo)航

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

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

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

前言

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

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

配置 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/, ""),
      },
    },
  },
});

之后重啟項目就可以了

小結(jié)?

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