vite配置跨域詳解

一、什麼是跨域

跨域指的是在瀏覽器中，一個正在運行在域名或埠號不同的JavaScript程序試圖訪問另一個JavaScript程序的資源。

跨域產生的原因是瀏覽器的同源策略，即JavaScript只能訪問與當前頁面主機名、協議、埠號相同的資源。

例如，當前網頁URL為 http://www.example.com/，那麼同源策略只允許JavaScript訪問URL為 http://www.example.com/ 的資源。

二、為什麼需要配置跨域

需要跨域訪問的情況多種多樣，例如：

• 前後端分離的項目，前端在獨立的域名下，需要通過AJAX請求訪問後端API。
• 前端需要在iframe中載入來自其它域名下的網頁。
• 通過跨域腳本，前端需要在頁面上引入來自其它域名下的JavaScript文件以實現某些功能。

以上都需要支持跨域訪問才能正常運行。

三、vite中跨域的配置方法

vite是一個基於ES modules的構建工具，支持原生ES modules的引入和導出語法，無需類似webpack的繁瑣配置即可啟動項目，因此配置跨域也非常簡單。

vite提供了一個server選項，可以自定義伺服器相關配置。我們可以通過設置此選項來完成跨域的配置。

在package.json文件的”script“中添加一條命令用於啟動vite：

“`
“dev”: “vite”
“`

然後在項目根目錄下創建一個vite.config.js的文件，內容如下：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
})

以上配置會將所有以/api開頭的HTTP請求代理到http://localhost:3000。

四、跨域配置參數詳解

1. target

類型: string

默認值: undefined

規定請求的地址，可以是一個字元串或一個對象

• target: ‘http://localhost:3000’ 代理到某個地址
• target: { host: ‘localhost’, port: 3000 } 代理到某個地址

我們也可以使用代理函數的形式指定不同的代理規則：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})

2. changeOrigin

類型: boolean

默認值: false

是否改變請求來源。如果設置為true，則源URL將作為原始請求頭中的Host欄位發送。

3. rewrite

類型: (path: string) => string | undefined

默認值: undefined

重寫路徑。用來重寫請求路徑，可以通過此選項去除基路徑。

4. pathRewrite

類型: Record<string, string>

默認值: {}

路徑重寫規則。可以使用正則表達式進行匹配和替換。

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

以上配置會將以/api開頭的請求重寫為當前路徑。

五、總結

vite中跨域的配置非常方便，只需要在vite.config.js中添加相應配置即可。我們可以通過設置server.proxy選項來完成跨域配置。同時，vite也支持代理函數的形式指定不同的代理規則，可以根據實際情況選擇使用不同的方法完成跨域配置。