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转发错误,前端不背这个锅

                

        

上一篇:13.4.1 实验1:配置VTP


下一篇:【哈希】Leetcode 两数之和-算法讲解