Error in handshake

The browser console error message is displayed

Error during WebSocket handshake: Unexpected response code: 403
Copy the code

Configuration of the sample

• Websocket registered

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

• Handshake interceptor

@Configuration
public class SystemInfoSocketHandshakeInterceptor implements HandshakeInterceptor {

    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map
       
         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.."); }}Copy the code

• 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 connection error")};Copy the code

Analysis of the

• The connection fails
• Access to intercept
• Nginx proxy
• Cross domain

To solve

Connection problem

If it is the connection above the problem, generally check whether the configuration is correct

Note version issues

Access to intercept

In interceptor, unblock

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

Nginx proxy

Proxy_set_header Upgrade $http_upgrade proxy_set_header Connection “Upgrade” proxy_set_header Host $Host

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; }Copy the code

Cross domain

Added setAllowedOrigins(“*”) to resolve 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();
}
Copy the code

Information related to

• Spring WebSockets

---

Collection time: 2021/02/03