Javascript中的套接字IO错误：“；从源站访问XMLHttpRequest'；空'；已被CORS策略阻止”；

我正在尝试构建一个客户端服务器，在该服务器上，将使用浏览器中的getUserMedia（）捕获来自用户网络摄像头的实时视频流，并使用Socket.IO将其发送到后端flask服务器，然后flask服务器将处理帧并实时将其发送回浏览器。我试图从中实现代码并进行了一些修改，但错误一直出现在控制台中

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>

//建立套接字连接
套接字=io（'http://127.0.0.1:5000');
socket.on（'connect'，function（）{
//console.log（“已连接…”，socket.Connected）
console.log（'客户端已连接到服务器！'）
});
const video=document.querySelector（“#videoElement”）；
视频宽度=500；
video.height=375；
if（navigator.mediaDevices.getUserMedia）{
navigator.mediaDevices.getUserMedia（{video:true}）
.then（函数（流）{
video.srcObject=流；
video.play（）；
})
.catch（函数（err0r）{
console.log（err0r）
log（“出了点问题！”）；
});
}
video.onload=函数（）{
设src=新cv.Mat（video.height，video.width，cv.cv8uc4）；
设dst=新cv.Mat（video.height，video.width，cv.cv8uc1）；
让cap=新简历视频捕获（视频）；
//每秒帧数
常数FPS=22；
设置间隔（（）=>{
第二章（src）；
var type=“image/png”
var data=document.getElementById（“canvasOutput”）.toDataURL（类型）；
data=data.replace（'data:'+type+'；base64'，''）；
socket.emit（'image'，data）；
}，10000/帧）；
}

我在React和node.js中遇到了类似的问题，因此我可以基于express.js为您提供参考

我们有用于创建套接字连接的

socket.io

包，我们使用

require('socket.io')(http) 

用于创建类似于python使用的

SocketIO（app）

的套接字服务器。所以默认情况下，它不允许跨原点通信

因此，可以选择在backend express.js中添加第二个参数，以便在跨原点之间建立连接。近似

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

使用

*

代替

http://localhost:3000

将允许所有源站进行连接

签出此链接

---

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

但为什么要将其标识为null？origin

null

表示无效的origin。这不是意味着提供的头是“null”而不是url吗？origin

null

对我来说是新的。将检查和评论。感谢您的输入。我已经在app.py中包含了这行代码

socketio=socketio（app，cors_allowed_origins=“*”）

，但是另一个错误

socket.io-1.2.0.js:4578 WebSocket连接到'ws://localhost:5000/socket.io/？EIO=3&transport=WebSocket'失败：WebSocket握手期间出错：出现意外响应代码：400