如何配置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 小时前
第11章 小高在对面|《互联网产品恩仇录》
前端
非优秀程序员3 小时前
第14章 只剩美团|《互联网产品恩仇录》
前端
非优秀程序员3 小时前
第09章 老乡何必为难老乡|《互联网产品恩仇录》
前端
非优秀程序员3 小时前
第07章 孙德良的阳谋|《互联网产品恩仇录》
javascript·后端
非优秀程序员3 小时前
第03章 三大门户,烽烟起于瀛海威|《互联网产品恩仇录》
前端
知已难寻4 小时前
Docker 入门:容器技术与 Docker 基础
java·运维·服务器·docker·云原生·容器
程序员大阳7 小时前
HTML+CSS+JS对话式实战(5)-活动管理页之查看报名名单的实现
javascript·css·html·查看报名名单
曦樂~7 小时前
【Web Development】02 CSS
前端·css
风骏时光牛马7 小时前
后端服务接口开发与数据逻辑处理
前端
东鹏特饮8 小时前
经典打砖块(Breakout)游戏
前端·css·css3