Socket IO error in Javascript: “Access to XMLHttpRequest from origin 'null' has been blocked by CORS policy”

Question

I am trying to build a client server where the live video stream from user's webcam will be captured using getUserMedia() in the browser and send to the backend flask server using Socket.IO, the flask server will then process the frame and send it back to the browser in real time. I tried to implement the code from How to stream live video frames from client to flask server and back to the client? and made some modification, but the error keep showing up in the console

Access to XMLHttpRequest at 'http://127.0.0.1:5000/socket.io/?EIO=3&transport=polling&t=1611033674638-0' from origin 'null' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. Anyone know how to fix it?

app.py

from flask import Flask, render_template
from flask_socketio import SocketIO, emit
from PIL import Image

app = Flask(__name__)
socketio = SocketIO(app)

@socketio.on('image')
def image(data_image):

    # decode and convert into image
    b = io.BytesIO(base64.b64decode(data_image))
    pimg = Image.open(b)

    ## converting RGB to BGR, as opencv standards
    frame = cv2.cvtColor(np.array(pimg), cv2.COLOR_RGB2BGR)

    # Process the image frame
    frame = imutils.resize(frame, width=700)
    frame = cv2.flip(frame, 1)
    imgencode = cv2.imencode('.jpg', frame)[1]

    # base64 encode
    stringData = base64.b64encode(imgencode).decode('utf-8')
    b64_src = 'data:image/jpg;base64,'
    stringData = b64_src + stringData

    # emit the frame back
    emit('response_back', stringData)

if __name__ == '__main__':
    socketio.run(app, host='127.0.0.1')

client.html

<div id="container">
    <canvas id="canvasOutput"></canvas>
    <video autoplay="true" id="videoElement"></video>
</div>

<div class = 'video'>
    <img id="image">
</div>

<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script async src="opencv.js"></script>
<script>

    // Establish socket connection 
    socket = io('http://127.0.0.1:5000');
    

    socket.on('connect', function(){
        // console.log("Connected...!", socket.connected)
        console.log('Client has connected to the server!')
    });

    const video = document.querySelector("#videoElement");

    video.width = 500; 
    video.height = 375; ;

    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
            video.srcObject = stream;
            video.play();
        })
        .catch(function (err0r) {
            console.log(err0r)
            console.log("Something went wrong!");
        });
    }

    
video.onload = function() {
    let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
    let dst = new cv.Mat(video.height, video.width, cv.CV_8UC1);
    let cap = new cv.VideoCapture(video);

        //Frame per second
        const FPS = 22;

    setInterval(() => {
    cap.read(src);

    var type = "image/png"
    var data = document.getElementById("canvasOutput").toDataURL(type);
    data = data.replace('data:' + type + ';base64,', ''); 
    socket.emit('image', data);
}, 10000/FPS);

}
</script>

Answer 1

I was facing similar issue in React and node.js so I can provide you reference based on express.js.

We have socket.io package for creating a socket connection and we use something like

require('socket.io')(http) 

for creating the socket server similarly like SocketIO(app) you use for python. So default it wasn't allowing the cross origin to communicate.

So there was an option of adding second parameter in backend express.js that allows to make connection between cross origin. Similar to

require('socket.io')(http, {cors: {origin: "http://localhost:3000", method: ["GET", "POST"]}});

Using * instead of http://localhost:3000 would have allowed all the origin to make connection.

Checkout this link

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

it will be helpful on how to enable cors in python.