本文主要是介绍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转发错误，前端不背这个锅
这篇关于Vite proxy-rewrite 属性详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
