vue使用vite配置跨域以及环境配置详解

本文主要是介绍vue使用vite配置跨域以及环境配置详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue前后端分离开发，配置代理都是绕不开的话题，下面是vite的代理

server: {proxy: {'/api': {target: 'https://api.hello.com',   //代理的服务地址，可以理解为/api等于https://api.hello.comsecure: true, // 配置httpschangeOrigin: true,  //允许跨域请求rewrite: (path) => path.replace(/^\/api/, '')   //重写路径，替换请求地址中的/api 为空}}},

配置后/api就是代理了target配置的地址（ http://api.hello.com）后端服务器IP和端口

验证请求

// 根据接口文档：实际参数获取数据
const mapData = await axios.get('/api/one/data').then(res => res.data)

此时，get请求路径不在是 https://localhost:5173/api/one/data 而是 http://api.hello.com/one/data 了

到此就可以跨域了。

这篇关于vue使用vite配置跨域以及环境配置详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---