vite.config.js本地配置获取真实请求地址详解

这段代码是 Vite 配置文件vite.config.js中关于开发服务器(server)的配置，主要用于设置代理和开发服务器行为。下面我逐部分详细解释：

一、完整代码结构

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 }
}

# 本地开发环境
NODE_ENV = "development"


# 开发环境
VITE_APP_SERVEICE = 'http://192.168.100.91:52222'
# 测试环境
# VITE_APP_SERVEICE = 'https://192.168.100.61:53333'

二、逐部分解析

1. 代理配置 (proxy)

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

• 作用：为特定请求路径设置代理规则
• "/inms-application"：匹配所有以 /inms-application 开头的 API 请求
• 原理：当开发服务器收到匹配的请求时，会将其转发到目标服务器

2. 代理目标配置 (target)

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

• 作用：指定代理转发的目标服务器地址
• loadEnv(mode, "./env/")：动态加载环境变量
  • mode：当前 Vite 运行模式（如 development 或 production）
  • "./env/"：环境变量文件所在目录
• VITE_APP_SERVEICE：从环境变量文件中读取的目标服务地址（如 http://api.example.com）

3. 跨域处理 (changeOrigin)

changeOrigin: true

• 作用：修改请求头中的 Host 为目标服务器的域名
• 为什么需要：解决开发时的跨域问题，让目标服务器认为请求来自同源
• 效果：
  • 原始请求头：Host: localhost:3000
  • 转发后请求头：Host: api.example.com

4. 日志级别 (logLevel)

logLevel: "debug"

• 作用：设置代理调试信息的详细程度
• "debug" 级别会显示：
  • 原始请求路径
  • 代理后的目标 URL
  • 响应状态码
  • 在终端输出详细的代理日志，方便调试

5. 自定义绕过函数 (bypass):获取真实请求地址

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

• 作用：在代理过程中插入自定义逻辑
• 参数：
  • req：客户端请求对象
  • res：服务器响应对象
  • options：代理配置选项
• 逻辑：
  1. 构建实际请求的 URL：

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

     • 组合目标地址(target)和重写后的路径
  2. 添加自定义响应头：

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

     • 在响应头中添加 A-Real-Url 字段
     • 目的：在浏览器开发者工具中可以看到请求实际转发到了哪个地址（方便调试）

6. 开发服务器行为配置

open: false,
hmr: { overlay: false }

• open: false：禁用服务器启动时自动打开浏览器
• hmr: { overlay: false }：禁用热更新时的错误覆盖层
  • 默认情况下，Vite 会在代码出错时显示全屏错误覆盖
  • 设置为 false 后，错误只在控制台显示，不会遮挡页面

三、完整工作流程

1. 浏览器请求：http://localhost:3000/inms-application/user/data
2. Vite 开发服务器匹配到 /inms-application 开头的路径
3. 修改请求头中的 Host 为目标服务器域名
4. 转发请求到：${VITE_APP_SERVEICE}/inms-application/user/data
5. 在响应头中添加 A-Real-Url 显示实际请求地址
6. 将目标服务器的响应返回给浏览器
7. 终端输出详细的代理调试信息

四、实际应用场景

这种配置特别适用于：

1. 前后端分离开发时解决跨域问题
2. 调试 API 请求路径和响应
3. 不同环境（开发/测试/生产）的无缝切换
4. 监控和诊断代理行为

五、注意事项

1. VITE_APP_SERVEICE 需要在 ./env/ 目录下的环境变量文件中定义
2. 自定义响应头 A-Real-Url 仅在开发环境有效
3. 生产环境部署时需要移除或修改此代理配置
4. 高日志级别(debug)可能产生大量输出，生产环境应关闭

总结 

到此这篇关于vite.config.js本地配置获取真实请求地址的文章就介绍到这了,更多相关vite.config.js获取真实请求地址内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论