概述
在使用 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
字段,方便调试。