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


相关推荐
知识分享小能手3 分钟前
Ubuntu入门学习教程,从入门到精通,Ubuntu 22.04 中的服务器 —— 知识点详解 (22)
服务器·学习·ubuntu
ProgramHan5 分钟前
React 19 新特性深度解析:告别 useEffect 的时代
前端·react.js·前端框架
次元工程师!5 分钟前
Sa-Token完成路由鉴权
java·服务器·前端
摸鱼仙人~8 分钟前
RAG 系统中的 TOC Enhance:用“目录增强”提升检索与生成效果
linux·运维·服务器
IT_陈寒9 分钟前
Redis 7.0 实战:5个被低估但超实用的新特性,让你的QPS提升40%
前端·人工智能·后端
Autumn729910 分钟前
【 jupyter 】PyCharm配置服务器连接jupyter
服务器·jupyter·pycharm
Jacob程序员15 分钟前
Linux scp命令:高效远程文件传输指南
linux·运维·服务器
奋斗者1号17 分钟前
SSL/TLS 证书在客户端-服务器通信中的详解
服务器·网络协议·ssl
南玖i18 分钟前
SuperMap iServer + vue3 实现点聚合 超简单!
javascript·vue.js·elementui
web守墓人18 分钟前
【前端】ikun-pptx编辑器前瞻问题四:通过AI编写一个前端pptx编辑器
前端