SockJS远程服务器报SSL协议错误，本地正常的解决求助

本地开发环境下，Angular 前端+Java 后端的 SockJS WebSocket 应用运行正常，但部署到远程服务器后，Https 前端连接 Http 后端时出现 net::ERR_SSL_PROTOCOL_ERROR，而 Http 前端连接 Http 后端可正常工作。应用部署在 Nginx 反向代理之后，调整过 Nginx 配置但未解决，Java 后端也收到相关错误。

核心问题本质 #

浏览器安全策略强制要求：Https 页面不允许发起 Http 类请求（包括未加密的 WebSocket ws:// 协议），必须使用对应加密协议（wss://）。这是触发 net::ERR_SSL_PROTOCOL_ERROR 的根本原因。

具体解决步骤 #

1. 调整 Nginx 配置，支持 wss 反向代理 #

确保 Nginx 同时处理 Https 请求和 WebSocket 的 wss 转发，配置示例：

server {
    listen 443 ssl;
    server_name your-domain.com;

    # SSL 证书配置
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # 处理 Angular 静态资源
    location / {
        root /path/to/angular/dist;
        try_files $uri $uri/ /index.html;
    }

    # 处理 SockJS/WebSocket 请求
    location /your-sockjs-endpoint {
        proxy_pass http://localhost:your-backend-port; # 后端 Java 服务地址
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        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;

        # SockJS 心跳超时配置
        proxy_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;
    }
}

# 可选：Http 请求重定向到 Https
server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$host$request_uri;
}

关键配置说明：

• proxy_http_version 1.1 和 Upgrade/Connection 头是 WebSocket 协议升级的必需项
• X-Forwarded-Proto 让后端识别请求来自 Https 通道
• 加长超时时间适配 SockJS 的心跳机制

2. 修改 Angular 前端的 SockJS 连接地址 #

将前端连接地址从 ws:// 改为 wss://，指向 Nginx 的 Https 端口，示例：

import * as SockJS from 'sockjs-client';
import { Stomp } from '@stomp/stompjs';

// 指向 Nginx 的 Https 地址，而非后端直接地址
const socket = new SockJS('https://your-domain.com/your-sockjs-endpoint');
const stompClient = Stomp.over(socket);

stompClient.connect({}, (frame) => {
    // 连接成功后的业务逻辑
});

3. 调整 Java 后端配置 #

确保后端正确处理反向代理传递的请求头，以 Spring Boot 为例：

• 在 application.properties 添加：

server.forward-headers-strategy=NATIVE

• WebSocket 配置中允许前端域名跨域（若前后端域名一致可忽略）：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/your-sockjs-endpoint")
                .setAllowedOriginPatterns("https://your-domain.com")
                .withSockJS();
    }
}

4. 常见排查点 #

• 检查 Nginx 的 SSL 证书是否有效、证书链是否完整
• 用 curl http://localhost:backend-port/your-sockjs-endpoint 测试后端服务是否正常响应
• 查看浏览器控制台的详细错误信息，排查是否存在跨域或证书信任问题
• 确认服务器防火墙已开放 443 端口，Https 请求能正常到达 Nginx

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