Error during WebSocket handshake 403

Error 403 during handshake¶

Browser console error prompt

Error during WebSocket handshake: Unexpected response code: 403

Configuration example¶

• websocket registration

@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(socketHandler, "/test").addInterceptors(new SystemInfoSocketHandshakeInterceptor());
    registry.addHandler(socketHandler, "/sockjs/test").addInterceptors(new SystemInfoSocketHandshakeInterceptor())
            .withSockJS();
}

• Handshake interceptor

@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);
            // business processing
        }
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception exception) {
        log.info("socket beforeHandshake..");
    }
}

• Client connection

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 error in connecting")
};

analysis¶

• Connection failed
• Access interception
• nginx proxy
• Cross-domain

solution¶

Connection problem¶

If it is the problem of connecting to the above, generally check whether the configuration is correct

Pay attention to version issues

Access interception¶

In the interceptor, unblock

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedOrigins("*");
        }
    };
}

nginx proxy¶

Configure in nginx

proxy_set_header Upgrade $http_upgrade
proxy_set_header Connection "upgrade"
proxy_set_header Host $host

Three configurations

The complete configuration is as follows:

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;
}

Cross-domain¶

Add setAllowedOrigins("*") to solve cross-domain issues

@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(socketHandler, "/test")
            .addInterceptors(new SystemInfoSocketHandshakeInterceptor())
            .setAllowedOrigins("*");
    registry.addHandler(socketHandler, "/sockjs/test")
            .addInterceptors(new SystemInfoSocketHandshakeInterceptor())
            .setAllowedOrigins("*")
            .withSockJS();
}