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

到此就可以跨域了。

相关推荐
ᖰ・◡・ᖳ7 分钟前
JavaScript:神奇的ES6之旅
前端·javascript·学习·es6
前端Hardy13 分钟前
HTML&CSS:一眼心动的 SVG 时钟
前端·javascript·css
又是忙碌的一天1 小时前
前端学习 JavaScript
前端·javascript·学习
右子2 小时前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
AGG_Chan2 小时前
flutter专栏--深入了解widget原理
开发语言·javascript·flutter
冰镇生鲜2 小时前
前端模拟 流式文本接口 打字机效果 mockStreamText
javascript
入秋3 小时前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort3 小时前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
Darenm1113 小时前
JavaScript事件流:冒泡与捕获的深度解析
开发语言·前端·javascript
渣哥3 小时前
不加 @Primary?Spring 自动装配时可能直接报错!
javascript·后端·面试