0
464
Viewssocket.io "Cross-Origin request Blocked" error
So, I'm trying to follow along this tutorial and right off the bat I can't get it to work. First off, these are my files:
root/frontend/index.html
<html>
[...]some static page[...]
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="index.js"></script>
</html>
root/frontend/index.js
const socket=io('http://localhost:3000');
socket.on('init', handleInit);
function handleInit(msg) {
console.log(msg);
}
root/server/server.js
const io=require('socket.io')();
io.on('connection', client =>{
client.emit('init', {data:'hello'});
});
io.listen(3000);
What he does next is running "npx live-server" in the frontend folder (which I also do). And also, run "yarn add socket.io" in the server folder and then run "npx nodemon server.js" and it's supposed to work. But doing those exact steps I get the errors: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/socket.io/?EIO=3&transport=polling&t=NsGvIgN. (Reason: CORS request did not succeed)"
and
"GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=NsGvO1Z"
1 answers
Answer question0
So, I kinda figured it out.
In the end I end up following another tutorial which is much simpler and much better for the starter. It's this one. Easy to understand, to the point, compact and works with no issues.
But if you encounter this CORS error then the way to fix it is in another video. Basically you have to install the cors package and add some definitions in the server js code. The fix itself is in the 10 minute mark, but I suggest watching from the start.