CODEWITHSUNDEEP
pythonsocketsvue.jscors
Gustavo Cesário
Gustavo Cesário

Reputation: 1656

How to fix "Access-Control-Allow-Origin" error in a python socket-io server

I'm creating a project that uses Vue.js (as a client) and Python (as a server). Python is used for some calculation and the Vue.js is used for the interface. I'm connecting them using python-socketio (https://python-socketio.readthedocs.io/en/latest/) and Vue-socket.io (https://github.com/MetinSeylan/Vue-Socket.io). Some weeks ago it was working just fine. The connection and communication was happening succefully. But a couple days ago I tried running the same code again and this error appeared: 

► Access to XMLHttpRequest at shttp://localhost:2003/socket.io/?EI0.38transport.polling&t=Mom6k2V' from origin 'http://1 :1 ocalhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
► GET http://localhost:2003/socket.io/?EI0=3&transport=polling&t=Mom6k2V net::ERR FAILED vue-socketio.js?5132:8

I tried using old repositories that i knew for sure that were working but I got the same problem.

I tried running the same code in another computer and in a Raspberry Pi and got the same problem.

I tried running chrome with --disable-web-security in order to disable cors but I got the following error: 

► WebSocket connection to 'ws://localhost:2003/socket.io/? vue-socketio.js?5132:10 EI0.3&transport=websocket&sid=7111830544fa4dfd98c3424afd25c10e failed: Error during WebSocket handshake: Unexpected response code: 400

Server

# -*- coding: utf-8 -*-
import eventlet
import socketio
import numpy as np
import json
import serial
import threading
from scipy.integrate import odeint

sio = socketio.Server()
app = socketio.WSGIApp(sio, static_files={
    '/': {'content_type': 'text/html', 'filename': 'index.html'}
})

@sio.on('connect')
def connect(sid, env):
    print('conectado ', sid)

@sio.on('disconnect')
def disconnect(sid):
    print('desconectado ', sid)

# Other functionalities in the code 
#...

if __name__ == '__main__':
    print('Inicnando...')
    thread = threading.Thread(target=leitura_dados, args=(ser,))
    thread.start()
    eventlet.wsgi.server(eventlet.listen(('', 2003)), app)

Connection in the client

Vue.use(new VueSocketIO({
  debug: false,
  connection: 'http://localhost:2003'
}))

I expected it to work as it did before. Without any CORS error or error during handshake. I have no idea why it suddenly stopped working.

Upvotes: 14

Views: 18635

Answers (4)

Lohith
Lohith

Reputation: 934

This is how I am using Socket.io with my Django application:

# setting.py
ALLOWED_HOSTS = ['0.0.0.0', 'localhost:3000']

Then, import the ALLOWED_HOSTS list from settings.py and prefix each allowed host with http://

async_mode = 'asgi'
mgr = socketio.AsyncRedisManager(settings.REDIS_URL)
allowed_hosts = ['http://' + str(i) for i in settings.ALLOWED_HOSTS]

# ...

asio = socketio.AsyncServer(
    logger=True,
    cors_allowed_origins=allowed_hosts,
    async_mode=async_mode,
    client_manager=mgr,
    # engineio_logger=True
)

Upvotes: 1

Aryan
Aryan

Reputation: 11

you can also use Cors-removing extensions that are working with your respective browser.

Upvotes: -1

Ahmed Shehab
Ahmed Shehab

Reputation: 1857

server.py

sio = socketio.AsyncServer(cors_allowed_origins=['*']) # * is bad

client.js - Extra arg required:

let socket = io("http://localhost:8080",
{transports: ['websocket', 'polling', 'flashsocket']}
)

copied! https://github.com/socketio/socket.io-client/issues/641#issuecomment-38276289

Upvotes: 11

Gustavo Cesário
Gustavo Cesário

Reputation: 1656

Looking a little bit deeper into the docs (https://python-socketio.readthedocs.io/en/latest/api.html?highlight=cors#server-class) I finally found the answer. Instead of:

sio = socketio.Server()

Use 

sio = socketio.Server(cors_allowed_origins='*')

Upvotes: 34

Related Questions