正向代理和反向代理

原创已于 2025-06-16 07:54:51 修改 · 930 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #面试

于 2025-06-16 07:29:44 首次发布

前端面试题专栏收录该内容

30 篇文章

订阅专栏

一、基本概念对比

正向代理和反向代理在网络架构中扮演着截然不同的角色，其本质区别可通过以下表格清晰呈现：

维度	正向代理（Forward Proxy）	反向代理（Reverse Proxy）
代理对象	客户端（用户）	服务器
用户感知	用户明确知道代理的存在（需手动配置或通过 PAC 文件）	用户无感知，以为直接访问的是目标服务器
主要用途	突破网络限制、缓存资源、保护用户隐私	负载均衡、安全防护、缓存加速、服务路由
典型场景	访问海外网站、公司内网代理	CDN 加速、微服务网关、API 网关
部署位置	客户端所在网络（或中间网络节点）	服务器所在网络（通常在服务器集群前端）

二、工作原理详解

（1）正向代理：客户端的 "中间人"

核心流程：
1. 客户端向正向代理服务器发送请求，指定目标服务器（如www.google.com）
2. 代理服务器接收请求后，以自身名义向目标服务器发送请求
3. 目标服务器响应后，代理服务器将结果返回给客户端
典型案例：
- 公司员工通过代理服务器访问外网（突破防火墙限制）
- 家用路由器配置代理服务器实现科学上网
技术实现：
- 常见工具：Squid、Nginx（需配置为正向代理模式）
- 前端场景：开发时通过webpack-dev-server的proxy配置转发请求

（2）反向代理：服务器的 "门面"

核心流程：
1. 用户向反向代理服务器发送请求（如访问www.taobao.com）
2. 代理服务器根据规则（如 URL、请求头）将请求转发给后端真实服务器
3. 真实服务器处理请求后，将结果返回给代理服务器，再由代理服务器返回给用户
典型应用场景：
- 负载均衡：将请求分发到多个服务器，避免单节点过载（如 Nginx 的upstream配置）
- CDN 加速：用户请求先到达离自己最近的代理节点，获取缓存资源
- 安全防护：隐藏真实服务器 IP，阻挡恶意请求（如 WAF 防火墙部署在反向代理层）
技术实现：
- 主流工具：Nginx、Apache、HAProxy
- 前端关联：微服务架构中，反向代理作为 API 网关统一处理跨域、认证等逻辑

三、前端开发中的实际应用

（1）正向代理在前端的使用场景

开发环境代理：

javascript

// webpack.config.js 配置正向代理
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-server.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

跨域请求处理：通过正向代理服务器转发跨域请求，规避浏览器同源策略限制

（2）反向代理对前端的影响

负载均衡与高可用：
反向代理可配置为轮询、加权轮询等策略，确保前端请求均匀分配到后端服务器

nginx

# Nginx 负载均衡配置示例
upstream app_servers {
  server 192.168.1.10:8080 weight=2;
  server 192.168.1.11:8080;
  server 192.168.1.12:8080 backup; # 备用服务器
}

缓存优化：
反向代理可缓存静态资源（如 HTML、CSS、JS），减少后端服务器压力
微服务路由：
在微前端架构中，反向代理可根据 URL 路径将请求转发到不同的微服务应用

四、核心区别总结

方向不同：正向代理 "代 client 求 server"，反向代理 "代 server 接 client"
用户视角：正向代理需用户主动配置，反向代理对用户完全透明
技术价值：
- 正向代理解决客户端访问限制问题
- 反向代理解决服务器端性能、安全、扩展性问题

理解两者的本质差异，有助于在前端架构设计中合理运用代理技术，例如：通过反向代理实现 API 网关统一处理跨域，通过正向代理优化开发环境请求转发，或利用 CDN（反向代理的一种）加速静态资源加载。