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


相关推荐
kk晏然13 分钟前
TypeScript 错误类型检查,前端ts错误指南
前端·react native·typescript·react
纆兰23 分钟前
汇款单的完成
前端·javascript·html
Lsx_41 分钟前
案例+图解带你遨游 Canvas 2D绘图 Fabric.js🔥🔥(5W+字)
前端·javascript·canvas
Xの哲學1 小时前
Linux SKB: 深入解析网络包的灵魂
linux·服务器·网络·算法·边缘计算
2501_944521001 小时前
rn_for_openharmony商城项目app实战-主题设置实现
javascript·数据库·react native·react.js·ecmascript
我想发发发1 小时前
Linux实现虚拟串口通信-socat
linux·运维·服务器
m0_471199631 小时前
【场景】如何快速接手一个前端项目
前端·vue.js·react.js
济6171 小时前
linux 系统移植(第五期)--Uboot移植(4)--在U-Boot 中添加自己的开发板(4) -其他需要修改的地方-- Ubuntu20.04
linux·运维·服务器
榴莲CC1 小时前
抗干扰LED数显屏驱动VK1624 数码管显示芯片 3线串行接口
前端
lili-felicity1 小时前
React Native for Harmony 个人消息列表最新消息置顶实现(多维度权重统计)
javascript·react native·react.js