🤔面试现在还问我：Webpack Proxy是如何解决跨域的？😭

一、Webpack Proxy 是什么

1. 定义
   Webpack Proxy 是 webpack-dev-server 提供的代理功能，用于将客户端请求转发到其他服务器（通常是后端 API 服务器）。

2. 核心目的
   解决开发阶段的跨域问题（浏览器的同源策略限制）。

3. 依赖工具

   • webpack-dev-server：集成开发服务器，提供代理功能。
   • http-proxy-middleware：底层使用的 HTTP 代理中间件。

---

二、工作原理

1. 代理流程

   • 浏览器发送请求到本地开发服务器（如 http://localhost:3000/api）。
   • 本地服务器通过代理规则（如 /api 前缀匹配）将请求转发到目标服务器（如 https://api.github.com）。
   • 目标服务器响应后，代理服务器将结果返回给浏览器。

2. 关键配置示例

   devServer: {
     proxy: {
       '/api': {
         target: 'https://api.github.com', // 目标服务器
         changeOrigin: true,              // 修改请求头中的Host为目标地址
         pathRewrite: { '^/api': '' },    // 重写路径（去掉/api前缀）
       }
     }
   }
   

3. 底层实现
   Webpack 使用 http-proxy-middleware 中间件实现请求转发，类似以下 Express 代码：

   const proxy = require('http-proxy-middleware');
   app.use('/api', proxy({ target: 'http://example.org' }));
   

---

三、为什么能解决跨域

1. 跨域的本质
   浏览器限制非同源（协议、域名、端口任一不同）的 AJAX 请求，但服务器之间无此限制。

2. 代理的解决方案

   • 同源请求：浏览器直接访问本地开发服务器（如 http://localhost:3000），属于同源。
   • 代理转发：本地服务器将请求转发到目标服务器（如 https://api.github.com），因为服务器间无跨域限制，请求成功。
   • 结果返回：代理服务器将目标服务器的响应返回给浏览器，浏览器视为同源响应。

3. 关键点

   • 跨域是浏览器的行为，代理服务器充当“中间人”绕过这一限制。
   • 生产环境需通过后端配置 CORS 或 Nginx 反向代理解决跨域。

---

四、常用配置参数

参数	作用
target	目标服务器地址（必填）。
changeOrigin	修改请求头中的 Host 为目标地址（防止某些服务器校验 Host）。
pathRewrite	重写请求路径（如去掉接口前缀 /api）。
secure	是否验证 HTTPS 证书（默认 true，开发时可设为 false）。

---

五、总结

• 开发阶段：通过 webpack-dev-server 的代理功能，将浏览器请求转发到后端服务器，规避跨域限制。
• 本质：利用服务器间无跨域限制的特性，由代理服务器“代劳”请求。
• 注意：代理仅用于开发环境，生产环境需通过后端配置（如 CORS、Nginx）解决跨域。