Lately i was working on a chat app using socket.io (node.js) and react in front-end, I faced a lot of CORS issues and as a beginner web developer i spent a lot of time to figure out how to fix this issue,That's why i decide to write this article.
Let's first give you an idea about CORS, Well when you're building an UI ,You need to connect to remote API to get or send some data. Everything works fine when you test your REST calls with curl,But when you implement them in the UI, It does not,It’s probably the mysterious CORS mechanism blocking you,So if you right click, select Inspect, and go to Console tab, and then you will see an error .
Most of the time, A script running in the user's browser would only ever need to access resources on the same origin , So the fact that JavaScript can't normally access resources on other origins is a good thing for security.
In this context, "other origins" means the URL being accessed differs from the location that the JavaScript is running from, by having:
a different scheme (HTTP or HTTPS)
a different domain
a different port
Well in my case i deployed my back-end in Heroku , and the front-end in Netlify , Until this stage everything looks good the front end deployment and the back-end deployment don't response with any errors , But when i tried to send a message in the chatroom i couldn't when i inspect in the browser i got this error
After hours of searching and reading about CORS i managed to solve this error and make my chat works, First thing i did
I installed CORS
Then i imported (or require) the CORS in my index file
Then i use it in my app
Then i add this code to my socket
Access-Control-Allow-Origin
This header is meant to be returned by the server, and indicate what client-domains are allowed to access its resources. The value can be:
* (like in my case) — allow any domain
a fully qualified domain name (eg. https://example.com)
If you require the client to pass authentication headers (e.g. cookies) the value can not be * , It must be a fully qualified domain!
Access-Control-Allow-Credentials
This header is only required to be present in the response if your server supports authentication via cookies. The only valid value for this case is true.
Access-Control-Allow-Headers
Provides a comma separated list of request header values the server is willing to support. If you use custom headers (eg. x-authentication-token you need to return it in this ACA header response to OPTIONS call, otherwise the request will be blocked.
Access-Control-Allow-Methods
A comma separated list of HTTP request type verbs (eg. GET, POST) which the server is willing to support.
and that's what fixed my chat app
and to check If you have properly configured your server (see above), this could mean that your browser wasn’t able to reach the Socket.IO server.
The following command:
should return something like:
If that’s not the case,Check that your server is listening and is actually reachable on the given port.
and also make sure that you're using the same version of socket.io in front-end and back-end; here's how my code looks like in frond-end
I hope that article was helpful.
Top comments (2)
You're a life saver. Was indeed helpful. Thanks so much!
Love this man, you save my life haha... I didn't want to dive into CORS just yet as I just had to get a quick thing done, this article saved me a lot of time and frustration, thanks again!