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


相关推荐
橘颂TA2 分钟前
【Linux】从 “抢资源” 到 “优雅控场”:Linux 互斥锁的原理与 C++ RAII 封装实战(Ⅰ)
linux·运维·服务器·c++·算法
RisunJan3 分钟前
Linux命令-init命令(管理运行级别和控制系统状态)
linux·运维·服务器
ayaya_mana3 分钟前
Chrony:通用-替换国内 NTP 源进行时间同步
linux·运维·服务器·chrony
菩提祖师_3 分钟前
量子机器学习在时间序列预测中的应用
开发语言·javascript·爬虫·flutter
深耕半夜4 分钟前
debug函数
linux·运维·服务器
一叶星殇6 分钟前
ASP.NET Core 后端如何通过 Nginx 获取真实客户端 IP 完整指南
服务器·tcp/ip·nginx
invicinble7 分钟前
对于前端数据的生命周期的认识
前端
PieroPc10 分钟前
用FastAPI 后端 和 HTML/CSS/JavaScript 前端写一个博客系统 例
前端·html·fastapi
未来之窗软件服务11 分钟前
幽冥大陆(九十二 )Gitee 自动化打包JS对接IDE —东方仙盟练气期
javascript·gitee·自动化·仙盟创梦ide·东方仙盟
名字越长技术越强12 分钟前
html\css\js(一)
javascript·css·html