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

到此就可以跨域了。

相关推荐
【ql君】qlexcel几秒前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
就改了35 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_37 分钟前
Ajax 入门
前端·javascript·ajax
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor1 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter1 小时前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
呆呆的心1 小时前
JavaScript 深入理解闭包与柯里化:从原理到实践 🚀
javascript·面试
快起来别睡了1 小时前
看完这篇文章,你就知道什么是proxy
javascript