Nginx反向代理解决前端跨域问题的完整指南

1. 跨域问题的本质与常见场景

跨域问题本质上是浏览器出于安全考虑实施的同源策略限制。当协议（http/https）、域名或端口任一不同时，浏览器会阻止前端JavaScript代码访问跨域资源。这种机制虽然保护了用户数据安全，但在现代前后端分离架构中却成了开发者的日常痛点。

我最近接手的一个电商项目就遇到了典型场景：前端Vue应用运行在http://localhost:8080，需要调用部署在http://api.shop.com:3000的商品接口。浏览器控制台立即抛出了那个熟悉的错误：

code复制Access-Control-Allow-Origin' header is present on the requested resource

常见的跨域解决方案包括：

• JSONP（仅限GET请求）
• CORS响应头配置
• WebSocket协议
• 服务端代理转发

其中Nginx反向代理方案因其配置灵活、性能无损的特点，成为企业级项目的首选。通过将不同域的请求统一转发到同源地址，完美绕过浏览器限制，同时保持服务端架构不变。

2. Nginx解决跨域的核心配置

2.1 基础代理配置

在Nginx的server配置块中添加以下内容，即可实现最基本的跨域代理：

nginx复制server {
    listen       80;
    server_name  local.front.com;

    location /api/ {
        proxy_pass http://api.shop.com:3000/;
        
        # 核心跨域头设置
        add_header 'Access-Control-Allow-Origin' '$http_origin';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-