Vite proxy-rewrite 属性详解

在前端开发中，为了避免跨域问题，我们会在vite.config.ts 中配置如下问题

rewrite: 由于不了解Nginx的知识，这个属性一直困扰着我，这个重写有啥用，加和不加有啥影响

  server: {
     host: '0.0.0.0',
     proxy: {
       '/api': {
           target: 'http://192.168.110.188:3091',   // 
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, '')
        },
      }
    },

假设我们有一个方法 axios.get('/api/getList'), 后端服务为 http://192.168.110.188:3091

1、(开发环境) 不加 rewrite:(path)=>path.replace(/^/api/,'')

       发起请求后，后端接受到接口为http://192.168.110.188:3091/api/getList

        所以这个时候，后端要额外加一个前缀 '/api'

2、(开发环境) 加 rewrite:(path)=>path.replace(/^/api/,'')

       发起请求后，后端接受到接口为http://192.168.110.188:3091/getList

        这个时候，后端不需要额外加一个前缀 '/api'

在线上/测试环境的时候一般需要用Nginx转发，如下面测试配置的nginx转发， localhost 对应的ip 为：http://192.168.xx.xx, 那么测试环境的地址则为：http://192.168.xx.xx/9006

Nginx配置后，如测试环境的请求为：

http://192.168.xx.xx/9006/lytk-api/getUser 则会转发到 后端服务/getUser,不带lytk-api的

补充一下：如果接口返回了 html页面，则是测试或者运维Nginx转发错误，前端不背这个锅