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


相关推荐
波诺波2 小时前
最小 SOFA XML 场景结构 0-base.scn
xml·java·前端
李少兄2 小时前
深入理解 Web 服务器、Servlet 容器与现代 Java Web 架构
java·服务器·servlet
运维行者_2 小时前
使用Applications Manager监控的关键MongoDB指标
服务器·开发语言·网络·数据库·mongodb·机器学习·云计算
lxllzwj52013142 小时前
Mac如何像shell一样丝滑的使用item2连接服务器.
服务器·macos·github
weixin_468466852 小时前
Jellyfin 家庭媒体中心从零搭建指南
服务器·docker·容器·自动化·jellyfin·媒体中心
用户713874229002 小时前
浏览器安全机制与现代 SPA 认证架构深度解析
前端
Momo__2 小时前
Node Modules Inspector:Vue 团队出品的依赖分析神器
前端·vue.js·npm
kisshyshy2 小时前
从零搭建全栈应用:模块化思想 + 语义化HTML + JSON‑Server快速Mock
前端
yamsfeer2 小时前
电商自动化支付全链路技术拆解:从Playwright到扫码支付的底层原理
前端
DongWook2 小时前
WangEditor渲染标签自定义属性的探索
前端