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


相关推荐
利刃大大1 分钟前
【Vue】声明式导航与传参 && 编程式导航与传参 && 嵌套与守卫
javascript·vue.js·ecmascript
爱喝水的鱼丶2 分钟前
SAP-ABAP:高效开发指南:全局唯一标识符ICF_CREATE_GUID函数的全面解析与实践
运维·服务器·开发语言·数据库·sap·abap·开发交流
软件资深者5 分钟前
口袋系统WinToGo(免费)新一代PE:在U盘中还原修复系统,支持Mac苹果设备
运维·服务器
丁劲犇6 分钟前
老旧CentOS7服务器JVM加载Jar缓慢排查:竟与NTP服务器有关
服务器·jvm·jar·java8·ntp·加载慢
方安乐7 分钟前
react笔记之useCallback/useEffect闭包陷阱
前端·笔记·react.js
沐墨染7 分钟前
黑词分析前端组件设计:双面板交互与黑词进度监控
前端
德迅云安全—珍珍8 分钟前
服务器cpu过高是什么情况,造成的原因有哪些?
运维·服务器
Psycho_MrZhang9 分钟前
Claude高质量产出
java·服务器·网络
运维行者_11 分钟前
用Applications Manager监控HAProxy:保障负载均衡高效稳定
运维·开发语言·前端·数据库·tcp/ip·负载均衡·服务器监控
a11177614 分钟前
拼图小游戏(HTML5、CSS3、JavaScript)
javascript·css3·html5