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


相关推荐
Xの哲學几秒前
Linux Miscdevice深度剖析:从原理到实战的完整指南
linux·服务器·算法·架构·边缘计算
wordbaby9 分钟前
Expo 进阶指南:赋予 TanStack Query “原生感知力” —— 深度解析 AppState 与 NetInfo
前端·react native
Moment15 分钟前
从美团全栈化看 AI 冲击:前端转全栈,是自救还是必然 🤔🤔🤔
前端·后端·面试
泽020215 分钟前
Linux信号专题
linux·运维·服务器
天问一23 分钟前
使用 Vue Router 进行路由定制和调用的示例
前端·javascript·vue.js
chuxinweihui25 分钟前
数据链路层
运维·服务器·网络
天天进步20151 小时前
【Linux 运维】告别 cat:如何按“时间段”优雅地截取日志文件?
linux·运维·服务器
梦里不知身是客111 小时前
flink中checkpoint的重启策略
大数据·服务器·flink
遇见火星2 小时前
Linux性能调优:理解CPU中的平均负载和使用率
linux·运维·服务器·cpu
韩立学长2 小时前
【开题答辩实录分享】以《基于Vue的非遗文化知识分享平台的设计与实现》为例进行选题答辩实录分享
前端·javascript·vue.js