vue请求代理查看真实地址

vue使用proxy代理地址，进行前后端联调时，服务不通时很难发现问题在哪里，所以此文讲述了可以查看访问的真实地址的相关配置，包括webpack和vite。

实现效果

浏览器显示

控制台显示

配置

webpack

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/APPServer': {
      	//process.env.BASEURL替换为http://ip:host也可以
        target: process.env.BASEURL, // 代理地址 http://ip:host
        changeOrigin: true,
        pathRewrite: {
          '^/APPServer': '/ECSH5Core',
        },
        onProxyRes(proxyRes, req, res) {
          const realUrl = process.env.BASEURL + req.url|| ''; // 真实请求网址
          console.log(realUrl); // 在终端显示
          proxyRes.headers['A-Real-Url'] = realUrl; // 添加响应标头(A-Real-Url为自定义命名)，在浏览器中显示
        },
      },
    },
  },
};

vite

vite.config.ts

import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
  server: {
    proxy: {
      '/APPServer': {
        target: process.env.BASEURL, // 代理地址 http://ip:host
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/APPServer/, ''),
        bypass(req, res, options: any) {
          const realUrl = options.target + (options.rewrite ? options.rewrite(req.url) : '');
          console.log(realUrl); // 在终端显示
          res.setHeader('A-Real-Url', realUrl); // 添加响应标头(A-Real-Url为自定义命名)，在浏览器中显示
        },
      },
    },
  },
});

调试分析

如果浏览器中网络没有响应，说明ip是不通的，此时需要解决网络问题，可能是IP或者端口填写错误问题，也可能是没有访问权限问题。

如果有响应，则根据真实的访问地址进行分析即可。