Javascript 中的套接字 IO 错误：“CORS 策略已阻止从源‘null’访问 XMLHttpRequest”

Question

我正在尝试构建一个客户端服务器，其中将使用浏览器中的 getUserMedia() 捕获来自用户网络摄像头的实时视频流，并使用 Socket.IO 发送到后端烧瓶服务器，然后烧瓶服务器将处理帧并将其实时发送回浏览器。我尝试从How to stream live video frames from client to flask server and back to the client? 实现代码并进行了一些修改，但错误一直显示在控制台中

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

我在 React 和 node.js 中遇到过类似的问题，所以我可以根据 express.js 为您提供参考。

我们有 socket.io 包用于创建套接字连接，我们使用类似的东西

require('socket.io')(http) 

用于创建类似于SocketIO(app) 用于python 的套接字服务器。所以默认是不允许跨域通信的。

所以有一个选项可以在后端 express.js 中添加第二个参数，以允许在跨域之间建立连接。类似于

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

使用* 而不是http://localhost:3000 将允许所有源建立连接。

查看此链接

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

这将有助于如何在 python 中启用 cors。