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


相关推荐
随风一样自由13 小时前
【前端+Canvas+航天】长征十号乙火箭回收全流程动画
前端·canvas·长征十号乙
AC赳赳老秦13 小时前
Excel 动态仪表盘制作:用 OpenClaw 自动处理数据、生成交互式图表并实时更新仪表盘
大数据·服务器·后端·测试用例·excel·deepseek·openclaw
自律懒人13 小时前
ChatGPT Work 上线当天实测:GPT-5.6 Sol 把 Codex 塞进桌面应用,跨应用自动做报表和 PPT,一个指令干 3 小时的活
javascript·开源
CappuccinoRose13 小时前
CSS、Less、Sass(含 SCSS)、Stylus
前端·css·less·sass·stylus
不听话坏1 天前
Ignition篇(下 一) 动态执行前的事情
开发语言·前端·javascript
likeyi071 天前
require 和 import的区别
开发语言·前端
pany1 天前
做 AI 友好的开源 Vue3 模板 🌈
前端·vue.js·ai编程
小二·1 天前
React 19 + Next.js 15 现代前端开发实战:App Router / Server Components / 流式渲染
前端·javascript·react.js
谙忆10241 天前
前端图片直传对象存储:OSS/S3 预签名 URL、STS 临时凭证与回调校验
前端
深圳恒讯1 天前
菲律宾云服务器与传统VPS的架构差异
运维·服务器·架构