如何配置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.图解:


相关推荐
徐小夕12 分钟前
耗时一周,我把可视化+零代码+AI融入到了CRM系统,使用体验超酷!
javascript·vue.js·github
高阳言编程13 分钟前
vue2 + node + express + MySQL 5.7 的购物系统
前端
5***a97519 分钟前
React Native性能优化技巧
javascript·react native·react.js
y***548827 分钟前
React依赖
前端·react.js·前端框架
2***B44927 分钟前
React测试
前端·react.js·前端框架
wanhengidc28 分钟前
云手机中分布式存储的功能
运维·服务器·分布式·游戏·智能手机·云计算
A3608_(韦煜粮)33 分钟前
深入理解React Hooks设计哲学与实现原理:从闭包陷阱到并发模式
javascript·性能优化·react·前端开发·react hooks·并发模式·自定义hooks
5***o50034 分钟前
React自动化测试
前端·react.js·前端框架
T***u33335 分钟前
React部署
前端·react.js·前端框架
Jing_Rainbow39 分钟前
【AI-7 全栈-2 /Lesson16(2025-11-01)】构建一个基于 AIGC 的 Logo 生成 Bot:从前端到后端的完整技术指南 🎨
前端·人工智能·后端