vue2与vue3-反代理写法差异-总结

vue2写法

proxy: {
    '/api': {
        target: 'http://localhost:14000',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        },
        // 显示请求代理后的真实地址
        bypass(req, res, options) {
            let proxyUrl = new URL(req.url || "", options.target + "")?.href || "";
            proxyUrl = proxyUrl.replace("/api/", "/");
            res.setHeader("x-res-proxyUrl", proxyUrl);
        }
    }
}

 

vue3写法

proxy: {
    "/api": {
        target: "http://localhost:14000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
        // 显示请求代理后的真实地址
        bypass(req, res, options) {
            let proxyUrl = new URL(req.url || "", options.target + "")?.href || "";
            proxyUrl = proxyUrl.replace("/api/", "/");
            res.setHeader("x-res-proxyUrl", proxyUrl);
        }
    }
}