前端HTTPS访问后端API出现ERR_SSL_PROTOCOL_ERROR问题求助

报错信息 #

控制台报错：

GET https://my_domain.com:8082/api/start net::ERR_SSL_PROTOCOL_ERROR

配置文件 #

Nginx 配置（nginx.conf） #

server {
    listen 80;
    server_name my_domain.com www.my_domain.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name my_domain.com www.my_domain.com;

    root /usr/share/nginx/html;
    index index.html;

    ssl_certificate /etc/nginx/ssl/certificate.crt;
    ssl_certificate_key /etc/nginx/ssl/private.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:HIGH:!aNULL:!MD5;

    # API Backend proxy
    location /api/ {
        proxy_pass http://backend:8082;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        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;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }

    error_page 404 /index.html;
}

Docker Compose 配置 #

services:
  frontend:
    build:
     context: ./frontend
     args:
      NGINX_CONF: ${NGINX_CONF}
#    network_mode: host
#    depends_on:
#      - backend
    ports:
      - '80:80'
      - "443:443"
    volumes:
      - ./frontend/ssl:/etc/nginx/ssl
    environment:
      - ENVIRONMENT=${ENVIRONMENT}
  backend:
    build:
     context: ./backend
     args:
      CONFIG: ${CONFIG}
    ports:
      - '8082:8082'
      - '8443:8443'
    volumes:
      - ./frontend/ssl:/etc/nginx/ssl
    environment:
      - ENVIRONMENT=${ENVIRONMENT}

networks:
  app-network:
    driver: bridge

排查情况 #

使用curl http://my_domain:8082/api/start可正常响应，但前端HTTPS访问带端口的地址报错。

解决方案 #

1. 修正前端API请求路径 #

核心问题：后端8082端口运行的是HTTP服务，不支持SSL协议，前端直接用https://my_domain.com:8082/api/start访问会触发SSL握手失败。

你已经在Nginx配置了/api/路径反向代理到后端，所以需要把前端API请求地址改成：

• 相对路径：/api/start（推荐，自动适配当前域名和协议）
• 绝对路径：https://my_domain.com/api/start

2. 确保Docker网络连通 #

当前Docker Compose定义了app-network但未将服务加入，导致Nginx无法通过http://backend:8082访问后端容器。修改Docker Compose配置，给两个服务添加网络关联：

services:
  frontend:
    # ... 现有配置
    depends_on:
      - backend  # 解除注释，确保后端先启动
    networks:
      - app-network  # 加入自定义网络
  backend:
    # ... 现有配置
    networks:
      - app-network  # 加入自定义网络

networks:
  app-network:
    driver: bridge

3. 安全优化（可选） #

既然通过Nginx反向代理访问后端，无需暴露8082端口给外部，删除后端的8082:8082端口映射：

backend:
    ports:
      - '8443:8443'  # 仅保留需要外部访问的端口（如果不需要也可删除）

4. 重启服务验证 #

执行命令重启所有服务：

docker-compose down && docker-compose up -d --build

重新访问前端并测试接口，确认报错消失。

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