挑战21天手写前端框架：Day 15 - Proxy 代理、前端代理与开发代理

在前端开发中，代理是一种重要的技术手段，用于拦截和处理请求和响应。通过代理，我们可以实现各种功能，如缓存、日志记录、权限控制等。在今天的文章中，我们将介绍 Proxy 代理、前端代理和开发代理的概念和用途，以及如何使用它们来提高开发效率和优化性能。
一、Proxy 代理
Proxy 代理是一种服务器端技术，用于拦截和处理客户端与目标服务器之间的请求和响应。通过 Proxy 代理，我们可以实现以下功能：

1. 缓存：将请求和响应缓存到本地，减少对目标服务器的访问次数，提高性能。
2. 权限控制：根据用户权限对请求进行过滤和拦截，确保只有符合条件的请求能够通过。
3. 日志记录：记录请求和响应的相关信息，便于分析和调试。
4. 负载均衡：将请求分发到多个服务器，平衡负载，提高系统的可扩展性和稳定性。
   在前端开发中，我们通常使用 Node.js 搭建一个本地 Proxy 代理服务器，来实现以上功能。例如，使用 Express 框架可以轻松地搭建一个简单的 Proxy 代理服务器。
   二、前端代理
   前端代理是指在客户端使用代理来拦截和处理网络请求的一种方式。通过前端代理，我们可以实现以下功能：
5. 预览：在开发过程中，我们可以使用前端代理来预览本地文件在生产环境下的表现。
6. 本地开发：在本地开发过程中，我们可以通过前端代理来模拟生产环境中的请求和响应，提高开发效率。
7. 数据模拟：在测试过程中，我们可以通过前端代理来模拟后端数据，避免频繁请求后端接口。
8. CORS 跨域：解决跨域问题的一种方法是通过代理绕过浏览器的同源策略限制。
   在前端开发中，我们通常使用 proxyTable 来设置前端代理。例如，在 Vue CLI 项目中，可以在 vue.config.js 文件中配置 proxyTable。
   三、开发代理
   开发代理是指在开发过程中使用的代理服务器，用于拦截和处理网络请求。与 Proxy 代理和前端代理不同，开发代理通常只用于开发环境，不会在生产环境中使用。通过开发代理，我们可以实现以下功能：
9. 自动重定向：将请求自动重定向到本地文件或模拟数据。
10. 数据模拟：模拟后端接口返回的数据，避免频繁请求后端接口。
11. 请求拦截：在请求被发送之前进行拦截和处理，例如添加请求头、修改请求参数等。
12. 响应拦截：在响应被客户端接收之前进行拦截和处理，例如修改响应数据、添加响应头等。
    在前端开发中，我们通常使用开发工具自带的代理设置来配置开发代理。例如，在 Chrome 中可以使用 —proxy-server 参数来指定代理服务器地址和端口。另外，也可以使用第三方工具如 DevTools Protocol (Chrome)、Charles (Mac) 等来设置开发代理。
    总结：在前端开发中，Proxy 代理、前端代理和开发代理都是非常重要的技术手段。通过合理地使用它们，我们可以提高开发效率和优化性能。在实际应用中，我们可以根据不同的需求选择不同的代理方式来实现相应的功能。