如何配置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 分钟前
IMX6ULL开发板学习-03(Linux文件相关命令)
前端·chrome
吴声子夜歌20 分钟前
ES6——Iterator和for...of循环详解
前端·javascript·es6
arvin_xiaoting22 分钟前
OpenClaw学习总结_IV_认证与安全_1:OAuth与认证详解
服务器·学习·安全
小李子呢021124 分钟前
前端八股3---ref和reactive
开发语言·前端·javascript
落魄江湖行28 分钟前
基础篇三 Nuxt4 组件进阶:插槽与事件传递
前端·nuxt4
kerli28 分钟前
Compose 组件:LazyColumn 核心参数与 key/contentType 详解
android·前端
好运的阿财29 分钟前
“锟斤拷”问题——程序中用powershell执行命令出现中文乱码的解决办法
linux·前端·人工智能·机器学习·架构·编辑器·vim
wang090738 分钟前
linux的中断分析(硬中断和软中断)
linux·运维·服务器
踩着两条虫40 分钟前
VTJ.PRO AI + 低代码实战:接入高德地图
前端·vue.js·ai编程