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


相关推荐
一水鉴天6 小时前
整体设计 定稿 之9 最后收束 app.py: 应用项目的结构及其模型和框架 (豆包助手)
服务器·windows·microsoft
前端不太难6 小时前
从 Navigation State 反推架构腐化
前端·架构·react
wanhengidc6 小时前
云手机的适配性怎么样?
运维·服务器·安全·智能手机·云计算
梁辰兴7 小时前
计算机网络基础:使用集线器的星型拓扑
服务器·网络·计算机网络·集线器·计算机网络基础·梁辰兴·星型拓扑
jimy17 小时前
安卓里运行Linux
linux·运维·服务器
前端程序猿之路7 小时前
Next.js 入门指南 - 从 Vue 角度的理解
前端·vue.js·语言模型·ai编程·入门·next.js·deepseek
大布布将军7 小时前
⚡️ 深入数据之海:SQL 基础与 ORM 的应用
前端·数据库·经验分享·sql·程序人生·面试·改行学it
川贝枇杷膏cbppg7 小时前
Redis 的 RDB 持久化
前端·redis·bootstrap
咕噜签名-铁蛋7 小时前
PyTorch:深度学习框架的创新之路与技术实践
服务器
D_C_tyu7 小时前
Vue3 + Element Plus | el-table 表格获取排序后的数据
javascript·vue.js·elementui