美文网首页
2025-08-13 vue3 vite 配置代理 之后如何查看

2025-08-13 vue3 vite 配置代理 之后如何查看

作者: 木木呀暮暮 | 来源:发表于2025-08-12 16:16 被阅读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

相关文章

网友评论

      本文标题:2025-08-13 vue3 vite 配置代理 之后如何查看

      本文链接:https://www.haomeiwen.com/subject/affbojtx.html