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


相关推荐
yqcoder13 小时前
CSS 外边距重叠(Margin Collapsing):现象、原理与完美解决方案
前端·css
Ether IC Verifier13 小时前
OSI网络七层协议详细介绍
服务器·网络·网络协议·计算机网络·php·dpu
山楂树の13 小时前
图像标注大坑:img图片 + Canvas 叠加标注,同步放大后标注位置偏移、对不齐?详解修复方案及亚像素处理原理
前端·css·学习·canva可画
本山德彪14 小时前
我做了一个拼豆图纸生成器,把照片秒变图纸
前端
_守一14 小时前
UE DS+Nakama进行游戏服务器开发(1)源码编译nakama
服务器·游戏
原来是猿14 小时前
【Socket编程预备知识】
linux·运维·服务器·网络
DTrader14 小时前
用TS无法实盘量化? - 实盘均线策略
前端·api
进击的夸父14 小时前
vfojs:Vue 超集架构,外壳React灵魂Vue
前端
编程老船长14 小时前
解决不同项目需要不同 Node.js 版本的问题
前端·vue.js
Wect14 小时前
LeetCode 5. 最长回文子串:DP + 中心扩展
前端·算法·typescript