zoukankan      html  css  js  c++  java
  • Error during WebSocket handshake 403

    握手时出错403

    浏览器控制台错误提示

    Error during WebSocket handshake: Unexpected response code: 403
    

    配置示例

    • websocket 注册
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(socketHandler, "/test").addInterceptors(new SystemInfoSocketHandshakeInterceptor());
        registry.addHandler(socketHandler, "/sockjs/test").addInterceptors(new SystemInfoSocketHandshakeInterceptor())
                .withSockJS();
    }
    
    • 握手拦截器
    @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..");
        }
    }
    
    • 客户端连接
    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连接错误")
    };
    

    分析

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

    解决

    连接问题

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

    注意版本问题

    访问拦截

    在拦截器中,解除拦截

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

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

    跨域

    添加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();
    }
    

    资料相关


    收录时间: 2021/02/03

  • 相关阅读:
    Roslyn 语法树中的各种语法节点及每个节点的含义
    WPF 使用 WindowChrome,在自定义窗口标题栏的同时最大程度保留原生窗口样式(类似 UWP/Chrome)
    在制作跨平台的 NuGet 工具包时,如何将工具(exe/dll)的所有依赖一并放入包中
    如何在 .NET 库的代码中判断当前程序运行在 Debug 下还是 Release 下
    像黑客一样!Chrome 完全键盘操作指南(原生快捷键 + Vimium 插件)
    .NET 使用 XPath 来读写 XML 文件
    XML 的 XPath 语法
    WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆)
    Windows 10 四月更新,文件夹名称也能区分大小写?
    C#/.NET 中推荐的 Dispose 模式的实现
  • 原文地址:https://www.cnblogs.com/ghostxbh/p/14368682.html
Copyright © 2011-2022 走看看