go to index

Vite代理下获取真实请求的URL

read time 2 min read
Vite 代理 URL

概述

在使用 Vite 进行本地代理时,真实请求的地址会被本地代理转发。平时开发中使用 Chrome DevTools 时,无法直接看到这个真实地址,这给问题定位带来了不便。

我们可以通过 Vite 提供的 bypass 函数来实现对真实请求 URL 的捕获和记录。

实现方法

配置 Vite 代理

vite.config.ts 中配置代理,并通过 bypass 函数捕获并打印真实请求的 URL:

typescript
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8050',
        changeOrigin: true,
        ws: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        bypass(req, res, options) {
          const proxyUrl = new URL(options.rewrite(req.url) || '', options.target as string).href;
          console.log('Proxy URL:', proxyUrl);
        },
        // only https
        // secure: false
      }
    }
  }
});

将 URL 写入响应头

为了在实际调试时更加直观,可以将捕获到的真实 URL 写入响应头:

typescript
bypass(req, res, options) {
  const proxyUrl = new URL(options.rewrite(req.url) || '', options.target as string).href;
  console.log('Proxy URL:', proxyUrl);
  res.setHeader('X-Proxy-URL', proxyUrl);
}

这样,在使用 Chrome DevTools 查看网络请求时,可以直接在响应头中看到 X-Proxy-URL 字段,方便调试。