3

I need help in debugging -the Same Origin Policy disallows reading the remote resource at https://some-domain.com. (Reason: CORS request did not succeed) in python flask-socketio error.

I am working on a chat application using python flask-socketio. In previously I have created that application in local and it works fine as expected, while I move the below code to the server it shows the above error. The client code runs in the https servers and server code also runs on the https server I don't know why that error shows.

I have attached my code below and please give a better solution to me.

server.py

    import json
    import os
    from flask import Flask, render_template, request,session
    from flask_socketio import SocketIO, send, emit
    from datetime import timedelta,datetime
    from flask_cors import CORS

    app = Flask(__name__)
    app.config['SECRET_KEY'] = 'secretkey'
    app.config['DEBUG'] = True
    app.config['CORS_HEADERS'] = 'Content-Type'
    cors = CORS(app, resources={r"/*": {"origins": "*"}})
    socketio = SocketIO(app)

    users = {}

    @app.before_request
    def make_session_permanent():
        session.permanent = True
        app.permanent_session_lifetime = timedelta(minutes=1)

    @app.route('/')
    #@cross_origin(origin='*',headers=['Content- Type','Authorization'])
    def index():
        return render_template('index.html')

    @socketio.on('connect')
    def connect():

        print("connected");
    @app.route('/orginate')
    def orginate():
        socketio.emit('server orginated', 'Something happened on the server!')
        return '<h1>Sent!</h1>'

    @socketio.on('username')
    def receive_username(username):
        users[username] = request.sid
        #users.append({username : request.sid})
        #print(users)
        emit('userList', users, broadcast=True)
        print('Username added!')
        print(users)
    if _name_ == '__main__':
        socketio.run(app,host='xxx.xxx.xx.x',port=5001)

client.js

var socket = io.connect("https://xxx.xxx.xx.x:5001/",{secure:false});

Screenshot 1: This screenshot explains the access-control-allow-orgin works fine for images under static folder in flask framework

enter image description here

Screenshot 2: This screenshot explains there is no access-control-orgin for socket call enter image description here

VinothRaja
  • 1,324
  • 7
  • 18

1 Answers1

8

You are using Flask-CORS to set up CORS on your Flask routes. You are missing a similar set up for Flask-SocketIO:

socketio = SocketIO(app, cors_allowed_origins=your_origins_here)

You can use '*' as the value to allow all origins (which I do not recommend), or set a single origin as a string, or a list of origins as a list of strings.

Miguel
  • 56,635
  • 12
  • 113
  • 132
  • 1
    thanks for reply. I have do this above changes. Review below code, socketio = SocketIO(app,cors_allowed_origins=['https://xxxxxxx']) but i have get below error. "Access to XMLHttpRequest at 'https:xxxxxxxx' from origin 'https://xxxxxxxxx' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'https://xxxxxx, *', but only one is allowed." – VinothRaja Aug 21 '19 at 09:25
  • Thanks for the reply. Here request URL means client URL right? If yes, some protocol I'm not able to give here a direct URL. but the sample Client URL is https://xxxxx.com:8443 The server URL is https://192.XXX.X.X:5000 – VinothRaja Aug 22 '19 at 04:43
  • I need to know which request was the one that produced the multiple CORS headers. By URL I mean the complete URL, not just the domain and port. Feel free to omit the domain name, I'm more interested in the path portion of the URL that is giving you this error. – Miguel Aug 23 '19 at 08:27
  • Thanks for reply. Access to XMLHttpRequest at https://xxx.xxx.xxx.xx/socket.io/?EIO=3&transport=polling&t=Mo-2XG9 from origin https://yyy.yyy.yyy.yy has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values https://yyy.yyy.yyy.yy, *, but only one is allowed - this is the complete error message returning from the browsers. – VinothRaja Aug 23 '19 at 15:22
  • I think you must be passing a bad value into the `cors_allowed_origins` argument. If you pass a list, it needs to be a Python list, not a string with comma separated values. – Miguel Aug 23 '19 at 17:05
  • 1
    Sorry, 'Access-Control-Allow-Origin' was also configured in nginx vhost file.Now it is working fine by removing the line from the vhost of nginx.Thanks for your reply – VinothRaja Aug 28 '19 at 09:18
  • @Miguel - Had spent hours before get here. Finally It works! It works! It works! My application was behind the Nginx proxy. I also feel that this answer should be more visible to search engine. I will include Nginx in the tags. – kta Mar 27 '20 at 02:56
  • hmm..Stackoverflow does not allow people to add more than 5 tags. – kta Mar 27 '20 at 02:57