chrome error "WebSocket connection to failed: Invalid frame header " in LAN

[Mactarvish]

vue pakage version:

    "socket.io": "^4.5.3",
    "socket.io-client": "^4.5.3",

Flask modules version:

Flask                                3.0.3
Flask-Cors                           5.0.0
Flask-Limiter                        3.9.2
Flask-SocketIO                       5.3.4

Ubuntu 22.04

I'm building a web using vue2 and expect client(chome browser) establishing a socket with Flask using Flask-SocketIO.

Sever code:

from flask import Flask
from flask_socketio import SocketIO, emit
from flask_cors import CORS


if __name__ == '__main__':
    app = Flask(__name__,
    static_folder='static', static_url_path='', template_folder='static'
    )
    CORS(app)
    # 初始化 SocketIO
    socketio = SocketIO(app, cors_allowed_origins='*')

    @socketio.on('connect')
    def handle_connect():
        print('Client connect')
        emit('server', {'data': 'connected!'} )

    @socketio.on('disconnect')
    def handle_disconnect():
        print('Client disconnected')

    @socketio.on("movement_control")
    def handle_movement_control(msg):
        print(msg)

    socketio.run(app, host='0.0.0.0', port=5000, debug=False)

vue code:

<template>
  <div>
    <el-slider v-model="targetSpeed" @input="handleMotorSpeedChange" show-input :step="1"
      :max="70" :min="0">
    </el-slider>
  </div>
</template>

<script>

import socketio from 'socket.io-client';

export default {
  name: 'HomeHome',
  components: {

  },
  data() {
    return {
    };
  },
  mounted() {
    this.remoteServerUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;
    if (process.env.NODE_ENV === 'development') {
      console.log('当前是调试环境（开发环境）');
      this.remoteServerUrl = `${window.location.protocol}//${window.location.hostname}:5000`;
    } else if (process.env.NODE_ENV === 'production') {
      console.log('当前是部署环境（生产环境）');
    }
    else {
      console.log('当前是未知环境');
    }
    this.$io = socketio.io(this.remoteServerUrl);
    console.log('完整的服务器 URL:', this.remoteServerUrl);

    this.$io.on('server', (data) => {
      console.log("收到服务器响应:" + data.data)
      this.consoleText += data.data + '\n';
    });
  },
  beforeUnmount() {
    if (this.$sio) this.$io.disconnect();
  },
  methods: {
    handleMotorSpeedChange() {
      this.$io.emit("movement_control", 3);
    },
  }
}
</script>

<style lang="less"></style>

If I open the website by http://localhost:8081/ everything works fine ,
while http://192.168.8.10:8081/ show continious error
websocket.js:56 WebSocket connection to 'ws://192.168.8.10:5000/socket.io/?EIO=4&transport=websocket&sid=XXX' failed: Invalid frame header

Anywhere I did wrong? Thanks in advance.

[miguelgrinberg]

Is there anything in your LAN that can be interfering? Maybe a firewall, anti-virus, router, etc.? I can't think of any reason why localhost would work and a remote client wouldn't.

[Mactarvish]

Thanks for your reply.
I've just sensed that http://127.0.0.1/ show this error too.

Here's the traceback if can helps locating the problem.

[miguelgrinberg]

My guess is that you have something else running on port 5000 that is interfering. Try using a different port number.

[Mactarvish]

Changing port didn't work :(