Я делаю совместный документ с использованием React JS и следую этому уроку:
https://medium.com/@ethanryan/making-a-simple-real-time-collaboration-app-with-react-node-express-and-yjs-a261597fdd44
https://github.com/ethanryan/textedit-app
Он использует YJS для одновременного редактирования. Когда я запускаю сервер на порту 3000, а мой клиент - на порту 3001, он приходит с ошибками на проверку клиента:
localhost/:1 Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?
EIO=3&transport=polling&t=1542472628946-27' from origin
'http://localhost:3001' 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.
Я также получаю эту ошибку на стороне сервера, проверяя много информации, когда я раскрываю ошибки:
GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=1542472716430-16004 net::ERR_NETWORK_CHANGED
GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=1542472716442-16005 net::ERR_NETWORK_CHANGED
POST http://localhost:3000/socket.io/?EIO=3&transport=polling&t=1542472716697-16006 404 (Not Found)
POST http://localhost:3000/socket.io/?EIO=3&transport=polling&t=1542472716709-16007 404 (Not Found)
Я искал эту ошибку и обнаружил, что мне нужно сделать следующее:
Либо загрузите расширение Chrome
Chrome Extension Allow-Control-Allow-Origin: *
или используйте:
var allowCrossDomain = function(req, res, next) {
res.header('Access-Control-Allow-Origin', "*");
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
}
Я скачал расширение cors и все еще получаю вышеуказанную ошибку. Однако, поскольку я использую YJS, сервер находится на их стороне, т.е. я просто запускаю npm на терминале в папке websocket sever,
Я не уверен, как решить эту проблему.