【发布时间】:2020-04-09 04:02:22
【问题描述】:
我用 nodejs 创建了一个简单的应用程序来测试 socketIO,我在我网站的一个子域上运行了服务器,而客户端(在 ReactJS 中)在另一个子域上。
我的服务器总是向我发送著名的错误:
访问 XMLHttpRequest 在 'https:///socket.io/?EIO=3&transport=polling&t=MyFav6q' 来自原点“https://”已被 CORS 策略阻止:否 请求中存在“Access-Control-Allow-Origin”标头 资源。
我尝试了超过 10 种解决方案,但它们都不起作用,我不知道这里有什么问题。
app.js
const cors = require("cors");
const app = require("express")();
app.use(cors());
const server = require('http').createServer(app);
const io = require('socket.io').listen(server);
io.sockets.on('connection', function (socket) {
socket.emit('message', 'Vous êtes bien connecté !');
socket.on('message', function (message) {
console.log(socket.pseudo + ' me dit: ' + message);
socket.broadcast.emit('message', socket.pseudo + " dit: "+message);
});
socket.on("pseudo", pseudo => {
socket.pseudo = pseudo;
socket.broadcast.emit('message', socket.pseudo + " s'est connecté !");
});
socket.on("reset-draw", data => {
socket.broadcast.emit('reset-draw', socket.pseudo + " a reset le dessin !");
});
socket.on("draw-rect", data => {
console.log(data);
socket.broadcast.emit('draw-rect', data);
});
});
server.listen(8100);
socketIO 部分的客户端:
import socketIOClient from "socket.io-client";
[...]
componentDidMount() {
this._context = this.refs.canvas.getContext('2d');
const socket = socketIOClient("https://<ServerURL>");
socket.emit('pseudo', "testing_guy");
socket.on("reset-draw", data => {
this._context.clearRect(0, 0, 500, 500);
console.log(data);
});
socket.on("draw-rect", data => {
this.drawRect(data);
});
}
【问题讨论】:
-
您可以为您的用例配置
cors()中间件。 -
我已经尝试添加cors模块了
-
这可能是因为您没有为您的环境正确配置它。例如
cors({credentials: true, origin: true})
标签: node.js reactjs express socket.io cors