snake.io | Slither.io clone in plain Javascript | Game Engine library

I just recently started an online tutorial on how to make a multiplayer snake.io game with Node js and socket.io.

https://www.youtube.com/watch?v=ppcBIHv_ZPs

Things went pretty smooth setting things up for the client side, but once I tried to establish a socket,(15:20 in video), I get errors in the client side browser chrome console, trying to establish a communication. At first I received an error as follows

127.0.0.1/:1 Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=3&transport=polling&t=NfTLuxq' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I then did some research on what CORS is, and to my understanding it is like a security protocol which restricts connections between different URL's, with this error wanting a header for security reasons?

I saw a user say he made it so the socket.io library was the same for both client side and server side. So I deleted the socket.io files from my server side and reinstalled them with the same version I pulled into the client side with a cdn. I used the command , 'yarn add socket.io@2.3.0'. I figured this would solve the problem however I then received a different error,

"Failed to load resource: net::ERR_CONNECTION_REFUSED"

I also don't understand why in this project we are pulling in socket.io from a cdn in index.html (which I'm not exactly sure how works), but then using yarn to add socket.io on the server side, and then we have to import it in again using 'require'. I'm not sure I understand the difference between these two methods of importing socket.io and why we are using two different methods.

Any help with clearing up some of my confusion on why I'm receiving these errors and the previous question would be greatly appreciated!

Code for index.html