nginx做代理转发前端请求到后端的代码示例

以下是一个使用Nginx作为反向代理服务器，将前端请求转发到后端服务的配置示例及详细说明：

基础配置示例

server {
    listen 80;
    server_name example.com;  # 替换为你的域名或IP

    # 前端静态文件服务（假设前端打包后放在/dist目录）
    location / {
        root /usr/share/nginx/html/dist;
        index index.html;
        try_files $uri $uri/ /index.html;  # 支持前端路由（如Vue/React的history模式）
    }

    # 代理转发API请求到后端
    location /api/ {
        proxy_pass http://backend-server:8000/;  # 后端服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 可选：WebSocket代理（如需要）
    location /ws/ {
        proxy_pass http://backend-server:8000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

关键配置说明

1. 前端静态文件服务

   • root 指定前端资源目录（如Vue/React打包后的dist文件夹）。
   • try_files 确保前端路由（如/about）不会返回404，而是由前端处理。

2. API请求代理

   • /api/ 开头的请求会被转发到后端服务（如http://localhost:8000）。
   • proxy_set_header 传递原始请求的IP和Host信息，确保后端能获取真实客户端IP。

3. WebSocket支持

   • 如果后端有WebSocket（如实时通信），需添加Upgrade和Connection头。

进阶配置

1. HTTPS支持

server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    location / {
        # ...（同上）
    }

    location /api/ {
        proxy_pass http://backend-server:8000/;
        # ...（其他代理配置）
    }
}

# HTTP强制跳转HTTPS
server {
    listen 80;
    server_name example.com;
    return 301 https://$host$request_uri;
}

2. 负载均衡

upstream backend {
    server backend1:8000;
    server backend2:8000;
    server backend3:8000;
}

server {
    location /api/ {
        proxy_pass http://backend/;
        # ...（其他代理配置）
    }
}

3. 跨域处理（若后端未配置CORS）

location /api/ {
    proxy_pass http://backend-server:8000/;
    add_header 'Access-Control-Allow-Origin' '$http_origin';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
}

调试技巧

1. 检查Nginx配置语法

   nginx -t
   

2. 重新加载配置

   nginx -s reload
   

3. 查看日志

   • 错误日志：/var/log/nginx/error.log
   • 访问日志：/var/log/nginx/access.log

常见问题

1. 404错误

   • 检查root路径是否正确。
   • 确保后端服务正在运行且proxy_pass地址无误。

2. 502 Bad Gateway

   • 后端服务未启动或网络不可达。
   • 检查防火墙/端口是否开放。

3. 前端路由刷新404

   • 确认try_files $uri $uri/ /index.html;已配置。

根据你的实际需求调整proxy_pass地址、路径和HTTPS证书路径即可。如果需要更复杂的配置（如缓存、限流），可以进一步扩展Nginx规则。