如何配置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 分钟前
HTML头部元信息避坑指南
前端·html
ZC跨境爬虫10 分钟前
UI前端美化技能提升日志day6:(使用苹果字体+计算样式对比差异)
前端·javascript·css·ui·状态模式
胡志辉的博客13 分钟前
前端反调试:常见套路、识别方法与绕过思路
前端·javascript·web安全·状态模式·安全威胁分析·代码混淆
сокол23 分钟前
【网安-Web渗透测试-Linux提权】CVE-2023-22809
linux·服务器·网络安全
牛奶28 分钟前
老板问我接口设计,我甩给他一个文档
前端·restful·graphql
gskyi32 分钟前
UniApp Vue3 数据透传终极指南
javascript·vue.js·uni-app
gskyi33 分钟前
uni-app 高阶实战:onLoad与getCurrentPages深度技巧
前端·javascript·vue.js·uni-app
爱学习的小囧38 分钟前
VMware ESXi 双管理网口配置全教程:新增 vmk1 端口 + 主备冗余 / 负载均衡双模式实操
运维·服务器·网络·windows·负载均衡·虚拟化
傻啦嘿哟40 分钟前
本地部署 vs 云服务器部署:IP环境对采集成功率的影响有多大
运维·服务器·tcp/ip
月明水寒40 分钟前
IDEA2026.1 vue文件报错
前端·javascript·vue.js·intellij-idea·idea·intellij idea