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