2025-08-13 vue3 vite 配置代理 之后如何查看
2025-08-12 本文已影响0人
木木呀暮暮
方法一:
如果是js 的话 vite.config.js
roxy: {
[env.VITE_APP_BASE_API]: {
changeOrigin: true,
target: env.VITE_APP_TARGET_BASE_API
//添加如下:
bypass(req, res, options) {
// 真实服务地址X-Req-Proxyurl
res.setHeader("X-Req-Proxyurl", options.target as string);
},
configure: (proxy, options) => {
// 配置后请求的真实接口地址在请求头x-real-url中
proxy.on("proxyRes", (proxyRes, req) => {
proxyRes.headers["x-real-url"] =
new URL(req.url || "", options.target as string)?.href || "";
});
},
},
},
如果是ts的话
vite.config.ts
proxy: {
[env.VITE_APP_BASE_API]: {
changeOrigin: true,
target: env.VITE_APP_TARGET_BASE_API
//添加
bypass(req, res, options) {
// 真实服务地址X-Req-Proxyurl
res.setHeader("X-Req-Proxyurl", options.target as string);
},
configure: (proxy, options) => {
// 配置后请求的真实接口地址在请求头x-real-url中
proxy.on("proxyRes", (proxyRes, req) => {
proxyRes.headers["x-real-url"] =
new URL(req.url || "", options.target as string)?.href || "";
});
},
},
},
请求路径如下:
image.png
方法二:
package.json文件中
"scripts": {
//新增如下代码
"dev1": "vite --mode development --debug",
},
在终端编译时可以看到
image.png