如何配置vite的proxy

1.前言

vite项目,本地开发环境可以通过配置proxy代理实现跨域请求。但是生产环境,该配置不生效,一般使用 nginx 转发,或者后端配置cors

2.解释

javascript 复制代码
server: {
      port: 9000,
      proxy: { // 本地开发环境通过代理实现跨域,生产环境使用 nginx 转发
        // 正则表达式写法
        '^/api': {
          target: 'http://xxxx/xx'// 后端服务实际地址
          changeOrigin: true, //开启代理
// path是请求方法axios配置的baseUr中去除 协议+域名+端口 剩下的部分。例如http://127.0.0.1:9000/api,这里的path就是/api
          rewrite: (path) => path.replace(/^\/api/, '') // 路径重写
        }
      }
    }

注意:最终的请求地址是 target + (rewrite重写的地址

3.图解:


相关推荐
LongJ_Sir4 分钟前
Cesium-鼠标传入着色器中并进行交互
javascript·着色器
爱勇宝6 分钟前
写给年轻程序员:别急着证明自己,也别太早放过自己
前端·后端·程序员
往上跑山8 分钟前
指南Ignition动态执行前的事情
javascript
叶落阁主10 分钟前
Vue3 中如何设计一套好用的 Icon 和 IconPicker 组件
前端·vue.js·icon
Dreamland工坊11 分钟前
AI 视频到可用资产:浏览器端抽帧与导出全链路方案选型
前端
kungggyoyoyo11 分钟前
从0开发一套geo优化软件:数据模型与API设计
前端·vue.js·后端
李明卫杭州12 分钟前
Web Components 完全指南:从 Custom Elements 到 Shadow DOM
前端
Darling噜啦啦12 分钟前
BEM 命名规范 + CSS Reset 实战:从微信按钮页面看专业前端开发
前端·css·代码规范
Dirty_Mouse14 分钟前
基于langgraph + sentry的自动化前端性能监控日报 (直接上github链接)
前端
鱼羽生生14 分钟前
Brainfly: 类型系统构建 Brainfuck 编译器
javascript