非Docker化Nginx（带SSL）反向代理Docker化SpringBoot后端配置求助

背景 #

已在Ubuntu VPS完成Nginx标准安装，配置Let's Encrypt SSL证书，React生产构建文件部署至/var/www/your_domain/html，80端口重定向至443，此前运行正常。原有Nginx配置如下：

server {
    root /var/www/your_domain/html;
    index index.html index.htm index.nginx-debian.html;

    server_name your_domain www.your_domain;

    location / {
            try_files $uri $uri/ =404;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
    if ($host = www.your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    if ($host = your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;
    listen [::]:80;

    server_name your_domain www.your_domain;
    return 404; # managed by Certbot
}

Docker Compose后端配置 #

同一机器上Docker部署的SpringBoot+PostgreSQL后端配置片段：

services:
  app:
    container_name: backend_container   
    tty: true 
    build:
      image: myhubrepo/mybackend:latest
    depends_on:
      - postgres
    dns:
      - 8.8.8.8
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod  
    networks:
      - mynet
networks:
  mynet:
    driver: bridge

修改后的Nginx配置（出现问题的版本） #

新增反向代理location块后，配置如下：

server {
    root /var/www/your_domain/html;
    index index.html index.htm index.nginx-debian.html;

    server_name your_domain www.your_domain;

    location / {
        try_files $uri $uri/ =404;
    }

    # Reverse proxy for Spring Boot application
    location /api {
        proxy_pass http://your_domain:8080;  # Using my domain name with port 8080
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

遇到的问题 #

• AXIOS网络错误
• ERR_SSL_PROTOCOL_ERROR
• 混合内容问题
• 404错误

解决方案 #

1. 修正反向代理目标地址 #

将proxy_pass中的域名改为本地地址，避免Nginx通过公网访问自身引发SSL/路由问题：

location /api {
    proxy_pass http://localhost:8080;
    # 其余Header配置保留
}

如果后端接口没有/api前缀，需在proxy_pass末尾加斜杠，自动去除路径前缀：

proxy_pass http://localhost:8080/;

2. 解决混合内容问题 #

确保React应用中调用后端接口使用相对路径（如/api/users），而非硬编码的http://your_domain:8080。可在React环境变量中配置API_BASE_URL=/api，让Axios自动适配当前HTTPS域名。

3. 完善反向代理Header与SpringBoot配置 #

补充必要Header，并让SpringBoot正确识别转发协议：

• Nginx新增Header：

proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;

• SpringBoot的application-prod.properties添加：

server.forward-headers-strategy=framework

4. 恢复80端口重定向配置 #

修改后的配置丢失了80端口重定向块，需补回确保所有HTTP请求转HTTPS：

server {
    if ($host = www.your_domain) {
        return 301 https://$host$request_uri;
    }

    if ($host = your_domain) {
        return 301 https://$host$request_uri;
    }

    listen 80;
    listen [::]:80;

    server_name your_domain www.your_domain;
    return 404; # managed by Certbot
}

5. 验证配置与容器状态 #

• 执行sudo nginx -t验证Nginx配置合法性，无错误后执行sudo systemctl reload nginx重启服务
• 检查后端容器状态：curl http://localhost:8080/api/xxx（替换为实际接口路径），确认后端能正常响应

内容的提问来源于stack exchange，提问作者rambomambo79