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


相关推荐
李景琰12 小时前
Debian12安装配置Mqtt之EMQX
linux·运维·服务器
凯瑟琳.奥古斯特12 小时前
Bootstrap快速上手指南
开发语言·前端·css·bootstrap·html
精益数智工坊12 小时前
拆解制造业仓库物料管理流程:如何通过标准化仓库物料管理流程解决账实不符难题
大数据·前端·数据库·人工智能·精益工程
接着奏乐接着舞12 小时前
3D Tiles tileset.jso 数据格式
运维·服务器·3d
李小白2020020212 小时前
RK3568 linux6.1 死机
linux·运维·服务器
恶猫13 小时前
网页自动化模拟操作时,模拟真实按键触发事件【终级方案】
前端·javascript·自动化·vue·网页模拟
FreeGo~13 小时前
Linux 系统编程 进程篇 (五)
java·linux·服务器
nbwenren13 小时前
办公AI实测:Gemini3、GPT-4o、Claude3.5谁更强?
服务器·数据库·php
小羊Yveesss13 小时前
2026年前端开发新趋势:智能协同、工具革新与场景深耕
前端·ai
Dxy123931021613 小时前
HTML中的Canvas可以干哪些事情
前端·html