Webpack devServer.proxy 是本地开发绕过跨域最轻量方式，支持单路径映射、路径重写、HTTPS 自签名证书处理、多路径及条件代理，配置后需重启 dev server 生效。
Webpack 的 devServer.proxy 是本地开发绕过跨域限制最常用、最轻量的方式，不需要额外起服务或改 hosts，直接在 webpack 配置里写几行就能把前端请求转发到后端 API。
基础代理：单路径映射
最常见场景：所有 /api 开头的请求，转发到 http://localhost:3000。
- 配置写法简洁，适合后端接口统一挂载在
/api下 - 前端代码仍调
fetch('/api/user')，实际发到http://localhost:3000/api/user - 注意：目标地址必须带协议（
http://或https://）
示例：
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
路径重写：去掉前缀再转发
当后端 API 不带 /api 前缀（比如直接是 /user），而你又不想改前端请求路径时，用 pathRewrite 去掉前缀。
立即学习“Java免费学习笔记（深入）”；
-
^/api表示匹配开头的/api，替换为空字符串 -
fetch('/api/user')→ 实际请求http://localhost:3000/user - 正则写法要加引号，且注意转义（
^是锚点，必须保留）
示例：
webpack.config.jsdevServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: { '^/api': '' }
}
}
}
HTTPS 后端 & 证书问题
如果后端是 HTTPS 地址但用了自签名证书（比如本地开发用的 https://localhost:8081），默认会被拒绝。
- 加
secure: false允许不校验证书 -
changeOrigin: true必须开启，否则 Host 头还是你本地域名，后端可能拒收 - 这个组合对本地调试 mock 服务或自建 HTTPS 后端很关键
示例：
webpack.config.jsdevServer: {
proxy: {
'/api': {
target: 'https://localhost:8081',
changeOrigin: true,
secure: false
}
}
}
多路径 & 条件代理
一个项目可能同时对接多个服务（登录、主业务、文件上传），或想对 HTML 请求跳过代理（只代理 API）。
- 用数组 +
context可批量匹配多个路径前缀 - 用
bypass函数判断请求类型：比如accept: text/html就返回本地页面，不走代理 - 函数中可读取
req.url、req.headers做细粒度控制
示例（多路径）：
webpack.config.jsdevServer: {
proxy: [{
context: ['/auth', '/api', '/upload'],
target: 'http://localhost:3000',
changeOrigin: true
}]
}
示例（跳过 HTML 请求）：
webpack.config.jsdevServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
bypass: (req) => {
if (req.headers.accept && req.headers.accept.includes('html')) {
return '/index.html';
}
}
}
}
}
配完记得重启 dev server，代理才生效。浏览器控制台 Network 标签页能看到请求 URL 显示为本地地址，但响应来自目标服务器——说明代理已起作用。
