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


相关推荐
lvchaoq14 分钟前
页面停留时间过长导致token过期问题
前端
兔老大的胡萝卜16 分钟前
pm2 部署nuxt4项目
javascript·nuxt4
阿蒙Amon19 分钟前
JavaScript学习笔记:17.闭包
javascript·笔记·学习
elangyipi12319 分钟前
深入理解前端项目中的 package.json 和 package-lock.json
前端·json
Wpa.wk21 分钟前
自动化测试 - 文件上传 和 弹窗处理
开发语言·javascript·自动化测试·经验分享·爬虫·python·selenium
roman_日积跬步-终至千里23 分钟前
【Starrocks】StarRocks 排错:`Invalid method name: ‘heartbeat‘`(BE 心跳端口/协议错误)
服务器·网络·php
l1t23 分钟前
利用小米mimo为精确覆盖矩形问题C程序添加打乱函数求出更大的解
c语言·开发语言·javascript·人工智能·算法
翼龙云_cloud24 分钟前
腾讯云渠道商:腾讯云快照和镜像备份区别在哪?
运维·服务器·云计算·腾讯云
LYFlied31 分钟前
【算法解题模板】-【回溯】----“试错式”问题解决利器
前端·数据结构·算法·leetcode·面试·职场和发展
composurext32 分钟前
录音切片上传
前端·javascript·css