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
上一篇 下一篇

猜你喜欢

热点阅读