VueJS 客户端无法连接到 Flask 服务器

Question

所以我正在创建一个应用程序，它使用 SocketIO 将常量消息从服务器（由 Flask 提供支持）流式传输到客户端（由 Vue 提供支持）。但是，到目前为止，我一直没有成功。这是我使用的最小设置：

app.py

from flask import Flask
import eventlet
from flask_socketio import SocketIO

class CustomFlask(Flask):
    jinja_options = Flask.jinja_options.copy()
    jinja_options.update(dict(
        variable_start_string='{$',  # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'
        variable_end_string='$}',
    ))

app = CustomFlask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@socketio.on('testing')
def testing(msg):
    print(msg)

if __name__ == '__main__':
    socketio.run(app, debug=True)

App.vue

<template>
  <div id="app">
    <Test/>
  </div>
</template>

<script>
import Test from './components/Test.vue'

export default {
  name: 'app',
  components: {
    Test
  }
}
</script>

Test.vue

<template>
    <div>
        This is a test
        <button @click="testing">Test socket!</button>
    </div>
</template>

<script>
    export default {
        name: 'Test',
        methods: {
            testing() {
                this.$socket.client.emit('testing', 'Test string')
            }
        }
    }
</script>

main.js

这是Vue的挂载JS文件

import Vue from 'vue'
import App from './App.vue'
import VueSocketIOExt  from 'vue-socket.io-extended';
import io from 'socket.io-client';

const socket = io('http://' + document.domain + ':' + location.port)
Vue.use(VueSocketIOExt, socket);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  sockets: {
    testing() {
      console.log('Tested socket for client!')
    }
  }
}).$mount('#app')

vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '/socket.io': {
                target: 'http://localhost:5000',
                ws: true,
                changeOrigin: true,
            }
        }
    }
}

我在检查控制台时经常遇到的错误是：

failed: Error during WebSocket handshake: Unexpected response code: 400
基本上是 GET 请求上的 400 (BAD REQUEST) 代码

Answer 1

最新版本的 Flask-SocketIO 配置了关于跨源设置的最安全设置，即只允许同源。如果您的 Vue 应用程序和 Flask 应用程序运行在不同的端口上，那么您必须配置跨源。

例如，如果您的 Vue 应用托管在 http://localhost:8080，您可以允许它作为来源：

socketio = SocketIO(app, cors_allowed_origins='http://localhost:8080')

VueJS 客户端无法连接到 Flask 服务器

VueJS client cannot connect to Flask server

flask

socket.io

vue.js

flask-socketio