這段代碼是 Vite 配置文件vite.config.js中關(guān)于開(kāi)發(fā)服務(wù)器(server)的配置，主要用于設(shè)置代理和開(kāi)發(fā)服務(wù)器行為。下面我逐部分詳細(xì)解釋?zhuān)?/p>

一、完整代碼結(jié)構(gòu)

server: {
  proxy: {
    "/inms-application": {
      target: loadEnv(mode, "./env/").VITE_APP_SERVEICE,
      changeOrigin: true,
      logLevel: "debug",
      bypass(req, res, options) {
        const realUrl = options.target + (options.rewrite ? options.rewrite(req.url) : "")
        res.setHeader("A-Real-Url", realUrl)
      }
    }
  },
  open: false,
  hmr: { overlay: false }
}

# 本地開(kāi)發(fā)環(huán)境
NODE_ENV = "development"


# 開(kāi)發(fā)環(huán)境
VITE_APP_SERVEICE = 'http://192.168.100.91:52222'
# 測(cè)試環(huán)境
# VITE_APP_SERVEICE = 'https://192.168.100.61:53333'

二、逐部分解析

1. 代理配置 (proxy)

proxy: {
  "/inms-application": {
    // 配置詳情...
  }
}

• 作用：為特定請(qǐng)求路徑設(shè)置代理規(guī)則
• "/inms-application"：匹配所有以 /inms-application 開(kāi)頭的 API 請(qǐng)求
• 原理：當(dāng)開(kāi)發(fā)服務(wù)器收到匹配的請(qǐng)求時(shí)，會(huì)將其轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器

2. 代理目標(biāo)配置 (target)

target: loadEnv(mode, "./env/").VITE_APP_SERVEICE

• 作用：指定代理轉(zhuǎn)發(fā)的目標(biāo)服務(wù)器地址
• loadEnv(mode, "./env/")：動(dòng)態(tài)加載環(huán)境變量
  • mode：當(dāng)前 Vite 運(yùn)行模式（如 development 或 production）
  • "./env/"：環(huán)境變量文件所在目錄
• VITE_APP_SERVEICE：從環(huán)境變量文件中讀取的目標(biāo)服務(wù)地址（如 http://api.example.com）

3. 跨域處理 (changeOrigin)

changeOrigin: true

• 作用：修改請(qǐng)求頭中的 Host 為目標(biāo)服務(wù)器的域名
• 為什么需要：解決開(kāi)發(fā)時(shí)的跨域問(wèn)題，讓目標(biāo)服務(wù)器認(rèn)為請(qǐng)求來(lái)自同源
• 效果：
  • 原始請(qǐng)求頭：Host: localhost:3000
  • 轉(zhuǎn)發(fā)后請(qǐng)求頭：Host: api.example.com

4. 日志級(jí)別 (logLevel)

logLevel: "debug"

• 作用：設(shè)置代理調(diào)試信息的詳細(xì)程度
• "debug" 級(jí)別會(huì)顯示：
  • 原始請(qǐng)求路徑
  • 代理后的目標(biāo) URL
  • 響應(yīng)狀態(tài)碼
  • 在終端輸出詳細(xì)的代理日志，方便調(diào)試

5. 自定義繞過(guò)函數(shù) (bypass):獲取真實(shí)請(qǐng)求地址

bypass(req, res, options) {
  const realUrl = options.target + (options.rewrite ? options.rewrite(req.url) : "")
  res.setHeader("A-Real-Url", realUrl)
}

• 作用：在代理過(guò)程中插入自定義邏輯
• 參數(shù)：
  • req：客戶端請(qǐng)求對(duì)象
  • res：服務(wù)器響應(yīng)對(duì)象
  • options：代理配置選項(xiàng)
• 邏輯：
  1. 構(gòu)建實(shí)際請(qǐng)求的 URL：

     const realUrl = options.target + (options.rewrite ? options.rewrite(req.url) : "")
     

     • 組合目標(biāo)地址(target)和重寫(xiě)后的路徑
  2. 添加自定義響應(yīng)頭：

     res.setHeader("A-Real-Url", realUrl)
     

     • 在響應(yīng)頭中添加 A-Real-Url 字段
     • 目的：在瀏覽器開(kāi)發(fā)者工具中可以看到請(qǐng)求實(shí)際轉(zhuǎn)發(fā)到了哪個(gè)地址（方便調(diào)試）

6. 開(kāi)發(fā)服務(wù)器行為配置

open: false,
hmr: { overlay: false }

• open: false：禁用服務(wù)器啟動(dòng)時(shí)自動(dòng)打開(kāi)瀏覽器
• hmr: { overlay: false }：禁用熱更新時(shí)的錯(cuò)誤覆蓋層
  • 默認(rèn)情況下，Vite 會(huì)在代碼出錯(cuò)時(shí)顯示全屏錯(cuò)誤覆蓋
  • 設(shè)置為 false 后，錯(cuò)誤只在控制臺(tái)顯示，不會(huì)遮擋頁(yè)面

三、完整工作流程

1. 瀏覽器請(qǐng)求：http://localhost:3000/inms-application/user/data
2. Vite 開(kāi)發(fā)服務(wù)器匹配到 /inms-application 開(kāi)頭的路徑
3. 修改請(qǐng)求頭中的 Host 為目標(biāo)服務(wù)器域名
4. 轉(zhuǎn)發(fā)請(qǐng)求到：${VITE_APP_SERVEICE}/inms-application/user/data
5. 在響應(yīng)頭中添加 A-Real-Url 顯示實(shí)際請(qǐng)求地址
6. 將目標(biāo)服務(wù)器的響應(yīng)返回給瀏覽器
7. 終端輸出詳細(xì)的代理調(diào)試信息

四、實(shí)際應(yīng)用場(chǎng)景

這種配置特別適用于：

1. 前后端分離開(kāi)發(fā)時(shí)解決跨域問(wèn)題
2. 調(diào)試 API 請(qǐng)求路徑和響應(yīng)
3. 不同環(huán)境（開(kāi)發(fā)/測(cè)試/生產(chǎn)）的無(wú)縫切換
4. 監(jiān)控和診斷代理行為

五、注意事項(xiàng)

1. VITE_APP_SERVEICE 需要在 ./env/ 目錄下的環(huán)境變量文件中定義
2. 自定義響應(yīng)頭 A-Real-Url 僅在開(kāi)發(fā)環(huán)境有效
3. 生產(chǎn)環(huán)境部署時(shí)需要移除或修改此代理配置
4. 高日志級(jí)別(debug)可能產(chǎn)生大量輸出，生產(chǎn)環(huán)境應(yīng)關(guān)閉

總結(jié) 

到此這篇關(guān)于vite.config.js本地配置獲取真實(shí)請(qǐng)求地址的文章就介紹到這了,更多相關(guān)vite.config.js獲取真實(shí)請(qǐng)求地址內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論