在前端开发中，跨域问题常常让人头疼

浏览器的同源策略（Same-Origin Policy）限制了从不同源（协议、域名、端口）加载资源的能力，但现代应用又往往需要与多个后端服务交互

代理服务器也是一种广泛使用的跨域解决方案，本文将深入探讨代理服务器如何绕过同源策略的限制，并提供具体的实现示例

为什么需要代理服务器？

跨域问题的本质是浏览器对同源策略的强制约束，但服务器之间的通信不受此限制

代理服务器正是利用这一特性，充当“中间人”的角色。前端请求发送到自己的代理服务器（与前端同源），再由代理服务器转发到目标服务器（不同源）
由于浏览器与代理服务器的通信是同源的，因此跨域问题被巧妙规避

核心原理

代理服务器解决跨域的核心逻辑如下：

前端请求代理服务器：前端代码将请求发送到与自己同源的代理服务器（例如 https://my-frontend.com/api）

代理服务器转发请求：代理服务器接收请求后，将其转发到目标服务器（例如 https://api.target-server.com/data）

目标服务器响应代理：目标服务器处理请求后，将结果返回给代理服务器

代理返回给前端：代理服务器再将结果返回给前端，完成一次跨域请求

整个过程对浏览器透明，浏览器认为所有请求都是同源的，因此不会触发跨域限制

代理服务器的实现方式

代理服务器的实现分为两种场景：本地开发环境和生产环境。以下是具体方案：

本地开发代理（前端工具链集成）

前端构建工具（如Webpack、Vite）支持通过配置代理服务器，方便开发调试

Webpack配置示例（webpack.config.js）：

module.exports = {
  devServer: {
    proxy: {
      '/api': {  // 拦截以/api开头的请求
        target: 'https://api.target-server.com', // 目标服务器地址
        changeOrigin: true,  // 修改请求头中的Origin为目标地址
        pathRewrite: {
          '^/api': '' // 重写路径（可选）
        }
      }
    }
  }
};

前端代码只需请求同源的 /api/data，Webpack会将其代理到 https://api.target-server.com/data

Vite配置示例（vite.config.js）：

module.exports = {
  devServer: {
    proxy: {
      '/api': {  // 拦截以/api开头的请求
        target: 'https://api.target-server.com', // 目标服务器地址
        changeOrigin: true,  // 修改请求头中的Origin为目标地址
        pathRewrite: {
          '^/api': '' // 重写路径（可选）
        }
      }
    }
  }
};

生产环境代理（Nginx反向代理）

生产环境中，通常使用Nginx作为反向代理服务器，配置如下：

server {
  listen 80;
  server_name my-frontend.com;

  location /api/ {
    proxy_pass https://api.target-server.com/; # 转发到目标服务器
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

前端请求 https://my-frontend.com/api/data 会被Nginx转发到 https://api.target-server.com/data

优缺点

优点	缺点
无需后端配合：前端可独立实现	维护成本：需额外部署代理服务
绕过浏览器限制：兼容所有请求类型（GET/POST等）	性能损耗：多一次网络跳转
灵活性强：可添加缓存、日志等功能	安全风险：需防范代理被滥用

总结

代理服务器通过 “隐藏” 跨域请求的源头，巧妙地绕过了浏览器的同源策略限制，是解决跨域问题的高效方案

无论是本地开发的工具链集成，还是生产环境的Nginx反向代理，都能快速实现跨域通信

然而，代理服务器也需权衡维护成本和安全风险。在实际项目中，可结合CORS等其他方案，选择最适合业务场景的跨域策略