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
基本上是400 (BAD REQUEST)请求上的GET代码

Answer 1

最近的Flask-SocketIO版本配置有关于跨域设置最安全的设置，即仅允许相同的起源。如果您的Vue应用程序和Flask应用程序在不同的端口上运行，则必须配置跨域。

例如，如果您的Vue应用托管在http://localhost:8080上，则可以通过以下方式将其作为来源：

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

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

1 个答案: