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


相关推荐
敲代码的彭于晏12 小时前
感谢掘金,我的书又出版了
前端·vue.js·react.js
龙猫里的小梅啊12 小时前
CSS(五)CSS盒模型
前端·css·html
一袋米扛几楼9812 小时前
【前端开发】基于TypeScript打破 React 黑盒——组件的“工厂心智模型”与源码解剖
javascript·react.js·typescript
Gofarlic_oms112 小时前
Allegro高级功能模块许可证管理注意事项
运维·服务器·开发语言·matlab·负载均衡
IMPYLH12 小时前
Linux 的 sum 命令
linux·运维·服务器·chrome·python·bash
AIDF202612 小时前
我们看一份报告的时候主要看什么
运维·服务器·推理·vllm
明月_清风12 小时前
Nginx 生产环境配置完全指南:从安全加固到性能调优
前端·nginx
用户6000718191013 小时前
【翻译】用 Reanimated CSS 动画为 TextInput 添加发光效果
前端
李剑一13 小时前
前后端命名冲突?驼峰与下划线的统一方案(附可直接复用代码)
前端
用户114818678948413 小时前
Git Stash 丢失后的完整找回指南
前端·git