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

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

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

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

验证请求

go 复制代码
// 根据接口文档:实际参数获取数据
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

到此就可以跨域了。

相关推荐
遂心_1 天前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark1 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
遂心_1 天前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy1 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy1 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼1 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
一个不爱写代码的瘦子1 天前
迭代器和生成器
前端·javascript
洋葱头_1 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing1 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
源猿人1 天前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化