前言

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

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

配置 Vite Proxy

我們這里以 Vite 的配置為例，來看一下如何給 API 請求設置代理。在 Vite 編寫的項目里邊，有一個 vite.config.js配置文件，里邊是關于 Vite 的配置項，可以在里邊配置代理。假如我們前端項目路徑為 http://localhost:3000，需要代理所有以 /api 開頭的 API 請求，把它轉發(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/, ""),
      },
    },
  },
});

之后重啟項目就可以了

小結?

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

總結

到此這篇關于Vite配置代理Proxy解決跨域問題的文章就介紹到這了,更多相關Vite配置代理Proxy解決跨域內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論