Flutter连接需认证WebSocket报错问题求助

问题现象 #

无认证的WebSocket连接可正常建立，但添加认证后持续报错：

Flutter: WebSocketException: Connection to 'http://myServer.org' was not upgraded to websocket

分别尝试stomp_dart_client和Flutter原生dart:io WebSocket库，均出现相同错误。

服务器日志分析 #

服务器端日志翻译后显示：

2023-11-21T15:38:16,234 TRACE [http-nio-8083-exec-1]
i.a.c.JwtHandshakeInterceptor: Token url 为空 2023-11-21T15:38:16,234
TRACE [http-nio-8083-exec-1] i.a.c.JwtHandshakeInterceptor: 不应接受连接

说明服务器的JWT握手拦截器未获取到有效Token，导致拒绝连接升级。

解决方案 #

1. 修正Authorization头格式 #

多数JWT认证要求请求头格式为Authorization: Bearer <token>，仅传递Token字符串会导致服务器无法识别。修改代码如下：

原生WebSocket（dart:io）修改版：

try {
  _socket = await WebSocket.connect(
    url, 
    headers: {
      'Authorization': 'Bearer $token', // 添加Bearer前缀
    }
  );
  _socket!.listen(
    (data) {
      emit(WebsocketState.DataReceived(data));
      debugPrint('----------------                -----------------');
      debugPrint(data);
      debugPrint('----------------                -----------------');
    },
    onError: (error) {
      emit(WebsocketState.Error(error.toString()));
      debugPrint('----------------                -----------------');
      debugPrint(error.toString());
      debugPrint('----------------                -----------------');
    },
    onDone: () {
      emit(const WebsocketState.Closed());
    },
  );
} catch (e) {
  emit(WebsocketState.Error(e.toString()));
  debugPrint('----------------                -----------------');
  debugPrint(e.toString());
  debugPrint('----------------                -----------------');
}

Stomp_dart_client修改版：

_stompClient = StompClient(
  config: StompConfig(
    url: url,
    // 移除手动添加的Connection/Upgrade头，由客户端自动处理
    webSocketConnectHeaders: {
      'Authorization': 'Bearer $token', // 添加Bearer前缀
      'Content-Type': 'application/json'
    },
    onConnect: (StompFrame frame) {
      emit(const WebsocketState.DataReceived('Connected'));
      debugPrint('----------------                -----------------');
      debugPrint(frame.body);
      debugPrint('----------------                -----------------');
      _subscribeToTopic();
    },
    onWebSocketError: (error) {
      emit(WebsocketState.Error(error.toString()));
      debugPrint('----------------                -----------------');
      debugPrint(error.toString());
      debugPrint('----------------                -----------------');
    },
  ),
);
_stompClient!.activate();

2. 尝试将Token放在URL参数中 #

服务器日志提到“Token url null”，可能服务器期望从URL参数中读取Token。尝试将Token拼接到URL：

final authUrl = '$url?token=$token';
// 后续使用authUrl建立连接，同时移除headers中的Authorization

3. 移除冲突的请求头 #

手动添加Connection: Upgrade和Upgrade: websocket可能与客户端自动生成的头冲突，导致服务器解析异常，建议删除这两个手动配置的头。

内容的提问来源于stack exchange，提问作者juan jose perez hernandez