Spring Boot+Nginx环境下Angular无法连接WSS问题求助

本地环境中Angular（rxstomp）连接Spring Boot的WebSocket（ws）端点正常，但部署到带Nginx（HTTPS）的生产服务器后无法连接。前端（FE）与后端（BE）部署在同一服务器的Docker容器中，使用不同URL。

现有配置：

Nginx配置 #

location /ws {
 ...
 proxy_pass http://backend/ws
 ...
}

后端Spring Boot代码 #

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/ws")
            .setAllowedOrigins(frontendUrl);
}

前端Angular代码 #

export function rxStompServiceFactory() {
    const rxStomp = new RxStompService();
    rxStomp.configure(myRxStompConfig);
    rxStomp.activate();
    return rxStomp;
}
export const myRxStompConfig: RxStompConfig = {
    brokerURL: 'ws://localhost:8088/ws',
...
}

1. 修正前端WebSocket协议与地址 #

生产环境用HTTPS，WebSocket必须对应使用wss://协议，不能硬编码本地的localhost:8088，要换成生产域名或相对路径：

export const myRxStompConfig: RxStompConfig = {
    // 写法1：指定生产HTTPS域名
    brokerURL: 'wss://your-production-domain.com/ws',
    // 写法2：自动适配当前协议与域名，更灵活
    // brokerURL: window.location.protocol.replace('http', 'ws') + '//' + window.location.host + '/ws',
...
}

2. 完善Nginx的WebSocket代理配置 #

Nginx默认不处理WebSocket握手和长连接，需添加专属配置：

location /ws {
    proxy_pass http://backend/ws;
    # WebSocket核心配置
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    # 长连接超时设置，按需调整
    proxy_connect_timeout 7d;
    proxy_send_timeout 7d;
    proxy_read_timeout 7d;
    # 传递客户端真实地址（可选）
    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;
}

3. 修正后端CORS配置 #

生产环境的frontendUrl必须是前端的HTTPS域名（如https://your-fe-domain.com），不能填localhost。Spring Boot 2.4+推荐用setAllowedOriginPatterns支持通配符（可选）：

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/ws")
            // 固定域名写法
            .setAllowedOrigins("https://your-fe-domain.com")
            // 通配符写法（支持同域名下的子域名）
            // .setAllowedOriginPatterns("https://*.your-domain.com")
            // 可选：启用SockJS兼容低版本浏览器
            .withSockJS();
}

4. 检查Docker网络连通性 #

确认Nginx容器能访问到Docker服务名backend，可在Nginx容器内执行curl http://backend/ws测试。若不通，检查FE、BE、Nginx是否在同一Docker网络中。

5. 日志排查定位 #

• 查看Nginx的access.log和error.log，找WebSocket握手失败记录；
• 查看Spring Boot后端日志，排查CORS错误或连接请求被拒绝的信息；
• 打开浏览器开发者工具的Network标签，查看WebSocket请求的状态码（如403、404、502），根据错误码定位问题。

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