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


相关推荐
谙弆悕博士4 分钟前
快速学C语言——第2章:编程规范与代码风格
服务器·c语言·开发语言·经验分享·程序人生·学习方法·业界资讯
切糕师学AI19 分钟前
为什么你的 SPA 网址必须包含 `#`?—— 前端路由 Hash 模式深度解析
前端·spa 网址·hash路由
线束线缆组件品替网24 分钟前
Amphenol ICC RJE1Y33610162401解析:工业网络线束为何越来越重要?
运维·服务器·网络·数码相机·智能路由器·电脑·智能音箱
冴羽26 分钟前
超越Vibe Coding —— AI 辅助编程进阶指南
前端·javascript·ai编程
流氓也是种气质 _Cookie38 分钟前
Chrome Performance常见名词解释(FP, FCP, LCP, DCL, FMP, TTI, TBT, FID, CLS)
开发语言·javascript·ecmascript
MXN_小南学前端39 分钟前
自制和整理常用前端 AI Skills分享,从需求到页面(附github地址)
前端·ai编程
yuki_uix1 小时前
双 RAF + MutationObserver:微前端跳转后的滚动复原完整方案
前端
暗不需求1 小时前
一文吃透 React Context:跨层级通信的利器
前端·javascript·react.js
Wect1 小时前
前端工程化 Mock 数据原理与实践
前端·api·前端工程化
小宇的天下1 小时前
Calibre DESIGNrev 单元(Cell)操作核心指南
java·前端·javascript