WebSocket握手时出错403

2/3/2021 bugfixWebSocketSpring

# 握手时出错403

浏览器控制台错误提示

Error during WebSocket handshake: Unexpected response code: 403
1

# 配置示例

  • websocket 注册
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(socketHandler, "/test").addInterceptors(new SystemInfoSocketHandshakeInterceptor());
    registry.addHandler(socketHandler, "/sockjs/test").addInterceptors(new SystemInfoSocketHandshakeInterceptor())
            .withSockJS();
}
1
2
3
4
5
6
  • 握手拦截器
@Configuration
public class SystemInfoSocketHandshakeInterceptor implements HandshakeInterceptor {

    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object
            > attributes) {
        log.info("socket beforeHandshake..");
        if (request instanceof ServletServerHttpRequest) {
            ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
            HttpSession session = servletRequest.getServletRequest().getSession(false);
            // 业务处理
        }
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception exception) {
        log.info("socket beforeHandshake..");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  • 客户端连接
var wsServer = "ws://127.0.0.1:8080";
var webSocket;
if ('WebSocket' in window || 'MozWebSocket' in window) {
    webSocket = new WebSocket(wsServer + "/test");
} else {
    webSocket = new SockJS(wsServer + "/sockjs/test");
}

webSocket.onerror = function (event) {
    console.log("websockt连接错误")
};
1
2
3
4
5
6
7
8
9
10
11

# 分析

  • 连接失败
  • 访问拦截
  • nginx代理
  • 跨域

# 解决

# 连接问题

如果是连接上面的问题,一般看一下配置是否正确

注意版本问题

# 访问拦截

在拦截器中,解除拦截

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedOrigins("*");
        }
    };
}
1
2
3
4
5
6
7
8
9

# nginx代理

在nginx中配置 proxy_set_header Upgrade $http_upgrade proxy_set_header Connection "upgrade" proxy_set_header Host $host 三个配置

完整配置如下:

location / {
    proxy_pass http://127.0.0.1:8080;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
1
2
3
4
5
6
7
8
9
10

# 跨域

添加setAllowedOrigins("*")解决跨域问题

@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(socketHandler, "/test")
            .addInterceptors(new SystemInfoSocketHandshakeInterceptor())
            .setAllowedOrigins("*");
    registry.addHandler(socketHandler, "/sockjs/test")
            .addInterceptors(new SystemInfoSocketHandshakeInterceptor())
            .setAllowedOrigins("*")
            .withSockJS();
}
1
2
3
4
5
6
7
8
9
10

# 资料相关


收录时间: 2021-02-03

最后更新时间: 10/11/2021, 3:53:50 PM