Acces-Control-Allow-Origin with Grunt Server and Flask SocketIO-app

问题

I'm getting the following error message when trying too connect my angular app, run with the Grunt server, with a socketIO Flask app:

XMLHttpRequest cannot load http://localhost:8080/socket.io/1/?t=1381872821951. 
Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin.

I have been doing some digging about this problem already and I know it comes from the fact the client (angularjs) is doing a request to a different server from which the response came.

Which of the both servers is the problem?

1) The Grunt Server? I already tried this: https://stackoverflow.com/a/17256255/1819058 Which should solve the problem if it came from the Grunt server

2) The Flask SocketIO server:

app = Flask(__name__)

@app.route("/socket.io/<path:path>")
def run_socketio(path):
    socketio_manage(request.environ, {'': ChatNamespace})

if __name__ == '__main__':
    print 'Listening on http://localhost:8080'
    app.debug = True
    import os
    from werkzeug.wsgi import SharedDataMiddleware
    app = SharedDataMiddleware(app, {
        '/': os.path.join(os.path.dirname(__file__), 'static')
        })
    from socketio.server import SocketIOServer
    SocketIOServer(('', 8080), app,
        namespace="socket.io", policy_server=False).serve_forever()

This is how I connect to the server:

var socket = ioSocket || io.connect('http://localhost:8080');

Can somebody help me with this? Isn't it logic that requests go to another server if you are using websockets?

Another strange note: The whole thing worked but stopped working after a reboot...

回答1:

You need assign your own SocketIOHandler. First of all you need fix init in SocketIOServer.

class CorsServer(SocketIOServer):
    def __init__(self, *args, **kwargs):
        self.sockets = {}
        if 'resource' in kwargs:
            print "DEPRECATION WARNING: use `namespace` instead of `resource`"
        self.namespace = kwargs.pop('resource', kwargs.pop('namespace',
                                                           'socket.io'))
        self.transports = kwargs.pop('transports', None)

        if kwargs.pop('policy_server', True):
            self.policy_server = FlashPolicyServer()
        else:
            self.policy_server = None
        #fix
        if 'handler_class' not in kwargs:
            kwargs['handler_class'] = SocketIOHandler
        super(SocketIOServer, self).__init__(*args, **kwargs)

Then make your own SocketIOHandler

class CorsHandler(SocketIOHandler):
    def write_plain_result(self, data):
        self.start_response("200 OK", [
            ("Access-Control-Allow-Origin", self.environ.get('HTTP_ORIGIN', '*')),
            ("Access-Control-Allow-Credentials", "true"),
            ("Access-Control-Allow-Methods", "POST, GET, OPTIONS"),
            ("Access-Control-Max-Age", 3600),
            ("Content-Type", "text/plain"),
        ])
        self.result = [data]

Init Flask, and add route

app = Flask(__name__)
@app.route("/socket.io/<path:path>")
def run_socket(param):
    socketio_manage(request.environ, {'': YourNamespace})

Init your CorsServer with your CorsHandler

if __name__ == "__main__":    
    server = CorsServer(('0.0.0.0', 8080), app,
        namespace="socket.io",handler_class=CorsHandler).serve_forever()