Клиент VueJS не может подключиться к серверу Flask - PullRequest
Новая
       52

Клиент VueJS не может подключиться к серверу Flask

0 голосов
/ 09 октября 2019

Итак, я создаю приложение, которое использует 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

Это файл JS для монтирования Vue 

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,
            }
        }
    }
}

Ошибки, которые я постоянно получаю при проверке консоли:

  1. failed: Error during WebSocket handshake: Unexpected response code: 400

  2. В основном a 400 (BAD REQUEST) код GET запроса

1 Ответ

2 голосов
/ 10 октября 2019

Последние версии Flask-SocketIO поставляются с наиболее безопасными настройками в отношении настройки перекрестного происхождения, которая допускает только одно и то же происхождение. Если ваше приложение Vue и приложение Flask работают на разных портах, вам необходимо настроить кросс-источник.

Например, если ваше приложение Vue размещено на http://localhost:8080, вы можете разрешить это как источникс: 

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