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


相关推荐
移远通信5 分钟前
配网-复杂场景
服务器·开发语言·php
dolt026 分钟前
基于deepseek实现的ai问答小程序
前端·开源
一只小bit19 分钟前
Qt 快速开始:安装配置并创建简单标签展示
开发语言·前端·c++·qt·cpp
加蓓努力我先飞24 分钟前
a-第一部分-基础篇-前端面试题总结
前端
青莲84328 分钟前
Android Jetpack - 3 LiveData
android·前端
Syron32 分钟前
ScaleSlider 组件实现
javascript
xhxxx34 分钟前
深入执行上下文:JavaScript 中 this 的底层绑定机制
javascript
狗哥哥37 分钟前
企业级 Vue 3 基础数据管理方案:从混乱到统一
前端
Xの哲學39 分钟前
Linux设备管理:从内核驱动到用户空间的完整架构解析
linux·服务器·算法·架构·边缘计算
前端涂涂1 小时前
哈希指针,什么是区块链,genesis blcok,most recent block,tamper-evident log,merkle tree,binar
前端