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


相关推荐
Bolt29 分钟前
TypeScript 7.0 来了:当 tsc 用 Go 重写之后
javascript·typescript·go
闪闪发光得欧1 小时前
前端提效新思路:Gemini 3.5 自动化定位 CSS 异常
前端·css
yingyima1 小时前
掌握正则表达式的核心:贪婪与非贪婪匹配的底层机制
前端
奇奇怪怪的1 小时前
文档摄入与 Chunking 策略全对决
前端
阳火锅2 小时前
😭测试小姐姐终于不骂我了!这个提BUG神器太香了...
前端·javascript·面试
道友可好2 小时前
AI 是最好的混乱放大器:代码熵管理实战
前端·人工智能·后端
猩猩程序员3 小时前
前端学习 AI Agent 开发
前端
Younglina4 小时前
打了3年羽毛球球才发现:我对自己的装备和胜率一无所知
前端·后端
风骏时光牛马4 小时前
Bash脚本高阶实战与常见报错完整代码案例详解
前端
kartjim4 小时前
我用 AI 一小时写了一个世界杯数据可视化平台|前端 VibeCoding 初体验
前端·程序员·ai编程