Javascript 中的套接字 IO 错误："从源'null'访问 XMLHttpRequest 已被 CORS 策略阻止"

Question

我正在尝试构建一个客户端服务器，其中来自用户网络摄像头的实时视频流将在浏览器中使用getUserMedia()捕获，并使用Socket发送到后端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>

Answer 1

我在React和node.js中面临类似的问题，所以我可以为您提供基于express.js的参考。

我们有socket.io包用于创建套接字连接我们使用像

这样的东西

require('socket.io')(http) 

用于创建套接字服务器，类似于python使用的SocketIO(app)。所以默认情况下它不允许交叉原点通信

所以有一个选项添加第二个参数后端express.js允许交叉原点之间的连接。类似于

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

使用*而不是http://localhost:3000将允许所有原点连接。

查看此链接

如何修复"Access-Control-Allow-Origin"python socket-io服务器错误

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