CORS

I am consistently testing my apps when I am building. Me developer tools are consistently open, whether it be for javascript or for css (Cascading Style Sheets =). Now when I’m building, I will run into an occasional hiccup or maybe my console log will not be what I need it to be in the exact moment. But wow, working on some socket io stuff, I noticed this when I opened my dev tools on chrome.

• Internal Scream* I normally work with Ruby on Rails for API and databases, but for this project I’m working with node.js, nodemon and socket io, so this is a bit new for me. ‘

As a refresher, CORS (Cross-Origin Resource Sharing) is used for accessing web resources on different domains, and a common standard. It pops up a lot when you are starting out. For this instance, its giving me the side tackle, when testing my server. Also, wow 76 console errors in a minute can be a bit much haha. Still both my client and server are working, just not getting along.

So, I did started to look at the documentation which gave some practical advice to fix this specific error. This can be a bit problematic with the generality of the documents. But I know the constant for my io is the target, or the bug of my issues.

As per the documentation, I need to also take into account which version of socket io. I am using which happens 3.1.1 which is important. Make sure should you travel this path of the troubleshooter, that you have some numbers to work with from your dependencies.

Now I don’t want to alter my code too much, so I need to take into account I’m calling my requirement for socket, so const socketio is my “require(“socket.io”) and server is (httpServer, … yadadada }. Like a great recipe i need to adjust and remeasure for the taste of my javascript server.

Now things did start to work well, but ran into some occasional issues with cors as I continue to build up my application from the setup. So… I pursued the issue a bit more and found this, using * as the origin.

Now this is actually, works pretty well. As for why, using the * means that the resource can be accessed by any origin. Now this is obviously, not recommended for production or when deploying. But Locally, I can use this to add layers to my frame. Then, readjust my cors object for the parameters needed when I deploy. This is entirely for the extra security that cors gives us.

Well, was a fun rabbit hole, but back to work. Till next time