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

【问题标题】：VueJS client cannot connect to Flask serverVueJS 客户端无法连接到 Flask 服务器
【发布时间】：2019-10-09 07:44:45
【问题描述】：

所以我正在创建一个应用程序，它使用 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 代码

【问题讨论】：

可能是跨域问题。您可以在服务器上启用日志以查看有关 400 错误的更多信息。将engineio_logger=True 添加到您的SocketIO() 构造函数中。
@Miguel 我在 SocketIO 构造函数中添加了 arg 并且总是打印 http://localhost:8080 is not an accepted origin. 这是否意味着我必须添加 cors_allowed_origins？
但这只是为了开发。部署后，Flask 服务器为 Vue 应用程序提供构建文件夹

标签： vue.js flask socket.io flask-socketio

【解决方案1】：

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

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

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

【讨论】：