Vite proxy-rewrite 属性详解

逍康

已于 2024-04-28 10:12:26 修改

阅读量2.3k

点赞数 8

分类专栏： vite/webpack 文章标签：前端

于 2024-04-28 10:03:34 首次发布

本文链接：https://blog.youkuaiyun.com/lsk222/article/details/137279250

版权

vite/webpack 专栏收录该内容

3 篇文章

订阅专栏

本文讲述了在前端开发中，如何在Vite.config.ts中使用`rewrite`属性解决跨域问题，以及在开发环境和线上环境中，不加和添加rewrite对API请求路径的影响。特别提到了Nginx的转发配置和其在解决前端与后端通信中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端开发中，为了避免跨域问题，我们会在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转发错误，前端不背这个锅