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


相关推荐
老前端的功夫1 分钟前
前端水印技术深度解析:从基础实现到防破解方案
开发语言·前端·javascript·前端框架
霍格沃兹测试学院-小舟畅学3 分钟前
性能测试入门:使用 Playwright 测量关键 Web 性能指标
开发语言·前端·php
tangbin5830856 分钟前
iOS Swift 工具类:数据转换工具 ParseDataTool
前端
潜水豆8 分钟前
AI 时代的前端究竟还能积累什么
前端
www_stdio8 分钟前
手写 instanceof:深入理解 JavaScript 原型与继承机制
前端·javascript·html
boombb12 分钟前
国际化方案:多环境、多语言、动态加载的完整实践
前端
狗哥哥13 分钟前
我是如何治理一个混乱的 Pinia 状态管理系统的
前端·vue.js·架构
一 乐29 分钟前
物业管理|基于SprinBoot+vue的智慧物业管理系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot
测试人社区—527233 分钟前
你的单元测试真的“单元”吗?
前端·人工智能·git·测试工具·单元测试·自动化·log4j
c骑着乌龟追兔子35 分钟前
Day 32 函数专题1:函数定义与参数
开发语言·前端·javascript