vite 設定網路代理

adore-live發表於2024-10-24
Vite

參考文件：vite 官網、node-http-proxy

完整示例：

export default defineConfig({
  server: {
    proxy: {
      // 字串簡寫寫法
      '/foo': 'http://localhost:4567',
      // 選項寫法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正規表示式寫法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 例項
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的例項
        }
      }
    }
  }
})

屬性說明：

  1. target：是目標地址，示例 '/foo': 'http://abc:4567' 中，當一個完整的請求 http://loaclhost:8080/foo/login 在匹配到關鍵詞 /foo 後將代理到地址 http://abc:4567/foo/login 上，需要注意的是替換的是關鍵詞前面的內容，關鍵詞包括後面的內容將會原封不動的新增到目標地址上。
  2. changeOrigin：true/false，預設值：false，將請求頭的源（origin）更改為 target 的 URL
  3. secure: true/false, 是否驗證 https 的 ssl 證書
  4. rewrite：重寫地址，是一個函式，接收一個地址，修改後並返回此地址

相關文章