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


相关推荐
fthux2 小时前
RenoPit 能为普通业主做什么?看懂图纸、审查合同,提前发现装修坑
javascript·人工智能·ai·开源·github·chrome扩展·open source·edge扩展·firefox扩展
仿生狮子3 小时前
✂️ Nuxt 最简单的字体裁剪工具:Fontize
javascript·vue.js·nuxt.js
程序员小崔日记4 小时前
20块钱注册一年 .COM 域名!Spaceship 最新优惠教程,支付宝即可付款(附优惠码)
服务器·腾讯云·域名
实心儿儿5 小时前
Linux —— 进程间关系和守护进程
linux·运维·服务器
林浅不想努力5 小时前
LVS知识点总结
服务器·云原生·lvs
石小石Orz5 小时前
我发现了开发者AI产品营收的新方向
前端·虚拟现实
老马识途2.06 小时前
关于跨域问题的总结
java·前端
魔力女仆6 小时前
分享一个 JS 鼠标跟随贪吃蛇背景库
开发语言·javascript·计算机外设
Dawn-bit6 小时前
Linux磁盘管理详解
linux·运维·服务器·计算机网络·云计算
别惊醒渔人7 小时前
Vue3 Diff 优化:最长递增子序列 LIS
前端·javascript·vue.js