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


相关推荐
PedroQue9913 小时前
Vite 1.2.0发布:自动生成pages.json
前端·vite
ly768913 小时前
React 19 从入门到工程实践:核心原理、新特性与项目实战
前端·react.js·前端框架
tedcloud12313 小时前
diagram-design 怎么安装?用 AI 自动生成更专业的架构图、流程图
linux·运维·前端·人工智能·开源·流程图
何智超13 小时前
React 18 并发更新:高优先级先渲染,为什么最终状态不会算错?
前端
前端小万13 小时前
两个半月的时间如何赚到 3000 块钱。
前端
YIAN13 小时前
端侧大模型:DeepSeek-R1 WebGPU 推理全流程源码深度解析
前端·typescript·deepseek
huainingning13 小时前
Linux和Windows系統SCP命令传输文件
linux·运维·服务器
请你吃div13 小时前
个人 Nuxt4 博客 SEO 优化实战教程
前端·nuxt.js·seo
网安蟹佬霸13 小时前
Android安全攻防实战:从APK逆向到Frida动态Hook全流程详解(附脚本)
android·前端·安全·web安全·逆向·csrf·网安
2401_8628808213 小时前
Linux应用层开发 --- 多任务
linux·服务器·c语言