Vite的target、rewrite和changeOrigin的使用場景

1. target

使用場景：target 屬性在 Vite 的 vite.config.ts 或 vite.config.js 文件的 server.proxy 配置中指定，用于設置代理服務器應該將請求轉發到的目標地址。這通常是一個后端服務的API接口地址。
配置示例：

export default defineConfig({  server: {  proxy: {  '/api': {  target: 'http://192.168.110.188:3091', // 后端API地址  // ... 其他配置  },  },  },  // ... 其他配置  
});

說明：在上面的示例中，/api 是代理路徑的前綴，當在前端代碼中發起一個以 /api 開頭的請求時，Vite 會將這個請求轉發到 target 指定的地址。

2. rewrite

使用場景：rewrite 屬性是一個函數，用于在將請求轉發到目標地址之前修改請求的URL路徑。這通常用于移除代理路徑前綴，以便后端服務能夠正確地處理請求。
配置示例：

export default defineConfig({  server: {  proxy: {  '/api': {  target: 'http://192.168.110.188:3091', // 后端API地址  rewrite: (path) => path.replace(/^\/api/, '') // 移除/api前綴  },  },  },  // ... 其他配置  
});

說明：在上面的示例中，rewrite 函數使用了一個正則表達式 /^/api/ 來匹配以 /api 開頭的路徑，并使用 replace 方法將其替換為空字符串，從而移除了前綴。這樣，當前端代碼發起一個以 /api/getList 的請求時，Vite 會將其轉發到 http://192.168.110.188:3091/getList，而不是 http://192.168.110.188:3091/api/getList。

3. changeOrigin

**注意：**雖然 changeOrigin 在參考文章中并未直接提及，但它是許多代理配置中常見的屬性，包括 Vite 的代理配置。
使用場景：changeOrigin 通常用于在跨域代理請求時更改請求的 origin 頭部，使得后端服務認為請求是來自于 target 指定的地址，而不是實際的前端開發環境。
配置示例（假設包含 changeOrigin）：

export default defineConfig({  server: {  proxy: {  '/api': {  target: 'http://192.168.110.188:3091',  changeOrigin: true, // 更改請求的origin頭部  rewrite: (path) => path.replace(/^\/api/, '')  },  },  },  // ... 其他配置  
});

說明：當 changeOrigin 設置為 true 時，Vite 會自動將請求的 origin 頭部設置為 target 指定的地址。這在處理跨域請求時尤為重要，因為一些后端服務會檢查請求的 origin 頭部來決定是否允許該請求。
總結：

target 用于指定代理的目標地址，通常是后端服務的API接口地址。
rewrite 用于在將請求轉發到目標地址之前修改請求的URL路徑，通常用于移除代理路徑前綴。
changeOrigin（盡管在參考文章中未直接提及）用于在跨域代理請求時更改請求的 origin 頭部，以便后端服務能夠正確地處理請求。這三個屬性通常配合使用，以解決前端開發中的跨域問題。

感謝觀看，有幫助的話，點點贊點點關注，謝謝老鐵！