Webpack Dev Server 的 devServer.proxy 是开发阶段解决跨域最常用、最轻量的方式，通过本地开发服务器转发请求绕过同源策略，仅在 webpack serve 开发环境生效，生产环境无效。
Webpack Dev Server 的 devServer.proxy 是开发阶段解决跨域最常用、最轻量的方式。它不修改浏览器行为，也不依赖后端配合，本质是让本地开发服务器充当“中间人”，把前端发往 /api/xxx 的请求，悄悄转发给真实后端，从而绕过同源策略限制。
代理规则写在哪？
在 webpack.config.js 的 devServer 配置项下添加 proxy 对象：
- 如果是 Vue CLI 项目，写在
vue.config.js的devServer.proxy中 - 如果是 Create React App（通过 CRACO），写在
craco.config.js的devServer.proxy里 - 注意：该配置仅在
webpack serve启动的开发环境生效，打包后的生产代码中完全无效
基础代理配置示例
假设后端地址是 http://localhost:3000，所有以 /api 开头的请求都要转发过去：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}- target：必须填，指定后端服务的真实地址（协议+域名+端口）
-
changeOrigin：建议设为
true，否则请求头中的Host仍是localhost:8080，部分后端（如 Nginx 或鉴权服务）会因 Host 不匹配直接拒绝 -
pathRewrite：把请求路径里的
/api去掉，避免转发后变成http://localhost:3000/api/users—— 如果后端接口本就带/api前缀，这里可改为{ '^/api': '/api' }或直接删掉这一项
常见进阶场景处理
实际开发中常遇到更复杂的情况，代理也支持灵活应对：
立即学习“前端免费学习笔记（深入）”；
-
多个代理规则：比如同时联调用户服务和订单服务，可写多个键：
'/user-api'和'/order-api'，各自配不同target -
HTTPS 后端：若
target是https://，需加secure: false（跳过证书校验，仅限开发环境） -
带 Cookie 转发：默认不传递 Cookie，如需登录态透传，加上
cookieDomainRewrite: true或手动在onProxyReq钩子中设置头 -
忽略某些路径：用
context或正则匹配排除，例如context: ['/api', '!/api/mock']表示代理所有/api但不代理/api/mock
验证代理是否生效
别只看控制台没报错就认为成功了：
- 打开浏览器开发者工具 → Network 标签页，发起一个
/api/login请求，观察 Request URL 显示仍是http://localhost:8080/api/login（这是正常的，前端看不到转发） - 重点看 **Request Headers** 中的
Origin是否为http://localhost:8080，以及Response Headers是否有后端返回的真实数据 - 如果返回 404 或 502，说明
target地址写错、后端没起来，或pathRewrite导致路径拼错了
