webpack-dev-server (简称 WDS) 中的 Proxy 代理功能，本质上是利用 Node.js 中间件在本地开发服务器与目标后端服务器之间建立了一个“HTTP 转发站”。

它的核心作用是解决前端本地开发时的跨域问题（CORS）。

下面从工作原理、核心技术、请求流程以及关键配置四个方面详细拆解它的工作机制：

1. 核心原理：为什么代理能解决跨域？

• 浏览器的同源策略（CORS 限制）： 浏览器从 http://localhost:8080 发起请求到 http://api.backend.com 时，因为域名/端口不同，触发跨域限制，请求会被浏览器拦截。
• 服务器与服务器之间没有同源策略： Node.js 服务端向另一个后端服务端发送 HTTP 请求时，不受浏览器同源策略的限制。

代理的作用：
前端不直接请求真实的后端接口，而是请求本地的 Dev Server。Dev Server 接收到请求后，在后台（Node.js 环境）将请求转发给真正的后端服务器，收到响应后再转交给前端浏览器。对于浏览器来说，它一直是在和同源的本地服务器通信。

2. 底层实现技术

webpack-dev-server 本身是基于 Express 框架构建的。它的 Proxy 功能并不是自己从头写的，而是集成了一个非常著名的开源 Node.js 中间件：

• http-proxy-middleware（它底层又依赖了 node-http-proxy）。

当你配置了 devServer.proxy 时，WDS 会在 Express 应用中注册这个中间件，拦截符合规则的请求。

3. 详细的工作流程

假设配置如下：

// webpack.config.js
module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://backend.com',
        pathRewrite: { '^/api': '' },
        changeOrigin: true,
      },
    },
  },
};

一次完整请求的生命周期：

1. 前端发起请求： 浏览器向本地 Dev Server 发送请求，例如 fetch('/api/users')，实际请求地址是 http://localhost:8080/api/users。
2. 中间件拦截： WDS 内部的 Express 服务器收到请求，http-proxy-middleware 匹配到该请求路径以 /api 开头。
3. 路径重写（Path Rewrite）： 如果配置了 pathRewrite，中间件会修改请求路径。这里 ^/api 被替换为空，路径从 /api/users 变为 /users。
4. 修改请求头（Change Origin）：
   • 若 changeOrigin: true，Proxy 会将请求头中的 Host 属性从 localhost:8080 改为 backend.com。这对于依赖 Host 头识别虚拟主机的后端非常重要。
5. 服务端转发： Node.js 的 HTTP 模块向 http://backend.com/users 发起真正的 HTTP/HTTPS 请求。
6. 响应回传： 后端服务器将数据返回给 Dev Server，Dev Server 再原封不动地将响应（Response）返回给浏览器。

4. 关键配置参数解析（帮助理解机制）

了解这几个关键参数能更深地理解 Proxy 的细节：

① changeOrigin: true 的作用

• 默认为 false： 发送给目标服务器的请求头中，Host 仍是 localhost:8080。
• 设置为 true： Proxy 会伪装请求来源，将请求头中的 Host 修改为 target 域名的 Host（如 backend.com）。
• 什么时候需要？ 当后端服务器做了域名校验，或者配置了基于域名的反向代理（如 Nginx 虚拟主机）时，必须设为 true。

② pathRewrite 的作用

• 通常前端为了区分静态资源和 API 请求，会给接口统一加前缀（如 /api）。
• 但后端真实接口可能并不包含 /api，这时需要利用 pathRewrite 在转发前将 /api 剥离掉。

③ secure: false 的作用

• 默认情况下，如果 target 是 https 协议且使用了自签名（不安全）证书，Node.js 会拒绝转发并报错。
• 设置 secure: false 可以关闭对 SSL 证书的合法性校验，允许转发到不安全的 HTTPS 服务。

④ WebSockets 代理 (ws: true)

• 不仅是 HTTP 请求，WDS 的 Proxy 还支持 WebSocket 协议的转发，设置 ws: true 后即可代理 ws:// 或 wss:// 请求。

总结

webpack-dev-server 的 Proxy 代理就是一个运行在本地 Node.js 环境中的透明 HTTP 代理服务器。它通过 http-proxy-middleware 拦截本地请求，修改请求头和路径后转发给真正的后端，再将响应交还给浏览器，巧妙地绕过了浏览器的同源策略限制。