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


相关推荐
honsor13 小时前
以太网温湿度传感器|动环监控核心采集设备,协议、组网、Zabbix接入实战
linux·服务器·ubuntu
Android系统攻城狮13 小时前
Linux FFmpeg深度解析之avcodec_default_get_buffer2调用流程与实战(二十)
linux·运维·服务器·ffmpeg·音视频进阶·ffmpeg音视频
程序员大阳13 小时前
副队长JavaScript教程(67)-Ajax初识:背景、历史与核心概念
javascript·ajax·同步·异步·概念·背景·来是
十碗阳春面13 小时前
阿里云 Ubuntu 22.04 部署 Flarum 论坛:从空白服务器到中文界面、公网 IP 访问
服务器·ubuntu·阿里云
程序员大阳13 小时前
副队长JavaScript教程(70)-Ajax同源策略与跨域
javascript·ajax·同源策略·跨越·corp
Android系统攻城狮13 小时前
Linux FFmpeg深度解析之av_parser_init调用流程与实战(二十一)
linux·运维·服务器·ffmpeg·音视频进阶·ffmpeg音视频
Ramble_Naylor13 小时前
Rust深度解读:高性能 Web 网关与 Axum 架构剖析
前端·架构·rust
程序员飞哥13 小时前
AI 编程额度怎么用才不浪费?
java·前端·后端
柳杉13 小时前
用 Codex 魔改卡神开源的 AIHOT,我做了个 3D 技术雷达
前端·aigc
王亚博_Abel13 小时前
AI 编程时代怎么选前端框架?同一个应用让 Agent 用 12 种框架各写 5 遍,我整理出这套选型方法
前端·人工智能·前端框架