反向代理仅用于本地开发绕过同源策略，不适用于生产环境；Webpack、Vite、CRA 各有配置方式，均需注意 changeOrigin、pathRewrite/rewrite 等关键选项及代理生效范围。
前端开发中，用 Webpack、Vite 或 Create React App 等工具时，反向代理不是为生产环境解决跨域，而是仅在本地开发服务器（如 npm run dev）中绕过浏览器同源策略，把 API 请求转发到后端服务。它不修改请求头、不涉及 CORS 配置，本质是开发服务器帮你“代劳”发请求。
Webpack Dev Server 反向代理
适用于使用 webpack-dev-server 的项目（如自建 Webpack 配置或老版 Vue CLI）。在 webpack.config.js 或 vue.config.js 中配置 devServer.proxy：
- 字符串写法（最简）：直接映射路径前缀到目标地址
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
};
此时请求 /api/users 会被代理到 http://localhost:3000/api/users。
- 对象写法（推荐）：可精细控制，比如去掉路径前缀、忽略 SSL 错误、添加请求头
'/api': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: { '^/api': '' },
secure: false
}
}
关键点：changeOrigin: true 修改请求头中的 Host 为 target 地址，避免后端因 Host 不匹配拒绝；pathRewrite 把 /api/users 改成 /users 再转发；secure: false 允许代理 HTTPS 目标（若后端是自签证书）。
立即学习“Java免费学习笔记（深入）”；
Vite 中配置 proxy
Vite 在 vite.config.ts（或 .js）的 server.proxy 中设置，语法更简洁，且默认开启 changeOrigin：
server: {
proxy: {
'/api': {
target: 'http://localhost:7001',
rewrite: (path) => path.replace(/^\/api/, ''),
secure: false
}
}
}
});
rewrite 是 Vite 的写法，等价于 Webpack 的 pathRewrite。注意：Vite 的 proxy 只在开发模式生效，构建后的 dist 文件不包含代理逻辑。
Create React App（CRA）的 proxy 设置
CRA 封装了 Webpack Dev Server，不支持复杂配置，但有两种轻量方式：
- 在
package.json根级别加"proxy": "http://localhost:5000"（仅支持单个 target，且必须是完整 URL） - 如需多接口或重写路径，改用
setupProxy.js（需安装http-proxy-middleware）
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:4000',
changeOrigin: true,
pathRewrite: { '^/api': '' }
})
);
};
这个文件必须放在 src 目录下，CRA 启动时会自动加载。
注意事项和常见误区
- 代理只作用于开发服务器，上线后必须由 Nginx、CDN 或后端统一处理跨域，不能依赖前端代理
- 浏览器控制台看到的仍是
/api/xxx请求，但 Network 面板的“Size”列显示“(from disk cache)”或“(from service worker)”说明没发出去——这是错觉；实际请求已由本地服务转发，状态码和响应体来自后端 - 如果代理后返回 404，先确认后端服务是否运行、路径是否正确，再检查
pathRewrite是否误删了必要路径段 - 代理无法解决 WebSocket 跨域，需要单独配置
ws: true（Webpack）或使用configure钩子（Vite）
