🔥 CORS explained: Error fixing on both client and server side

Hartaj-Singh-Dev — Thu, 29 Dec 2022 13:11:31 +0000

Prerequists:-

Having knowledge about how HTTPS works
Have basic knowledge how web works
Have basic knowledge of server and client architecture ___ So, either right now you are stuck at this error or once in your full stack web dev journey have faced it, well either case in this article we will fix it. Before fixing any problem, the most crucial thing is to know what is the problem exactly and why is it occurring.

CORS (cross-origin-resource-sharing) is a policy by web browsers for security purposes and also an option for HTTP request headers to a server to indicate an origin ( domain, URL ), which allows the browser to permit loading resources ( scripts or code ) from other servers.

Now let’s use an example, let’s say you are building a website (full-fledged) and on the dashboard page of the website you want to access data from the database which is on this URL (https://api.backend.com/{username}) from the origin (https://frontend.com/dashboard), Now overtop view is that from origin you will make a request to the backend for data using HTTP and server will give you data, now let’s break it down

GET https://api.backend.com/{username} HTTP/1.1

Here browser The web enforces something called the same-origin policy. By default, we can only access resources that are located at the same origin as the origin of our request! 💪🏼 It's totally okay to load an image that's located at https://frontend.com/image1.png. So now you will questioning how would you determine same origin and cross orgin .

Same origin:

https://frontend.com/{anything}

Corss origin:

different domain -
https://api.backend.com/{anything}

different protocol -
http://api.backend.com/{anything}

different subdomain -
https://server.api.backend/{anything}

different port -
https://api.backend.com:8080

So as you have idea to these policy, now as you already made a request to server it will by default have a response of

 HTTP 404 code 
Access to fetched has been blocked by CORS policy

But now as you already are familiar with the problem now let’s fix this problem
From server-side CORS , now edit server response with a header

response.setHeader(
“Allow-Control-Allow-Origin” , ”https://frontend.com”
)

Or if you are using node.js or anything framework for backend, then you can search for docs

Awesome , now as you added this header into your server response , now same-origin policy won’t restrict us from getting Data

The CORS mechanism within the browser checks whether the value of the Access-Control-Allow-Origin header equals the value of the Origin that was sent by the request
In this case, the origin of our request is https://www.frontend.com, which is listed in the Access-Control-Allow-Origin response header!

And if you are still having Issues with CORS , search for official docs of whatever tech you are using in backend.

Credentials

Even if you are using token or cookies in your website , by default cookies are also on same-origin policy , even if you allow access to resources from cross origin , still by default cookies are not accessable to it , To get access to cookies in cross-origin , you have to set another http header " Access-Control-Allow-Credentials "

All set! We can now include credentials in our cross-origin request 🥳

Conclusion

Though , we all devs can agree , first time encountring CORS error is hell lot of frustrating ,but after a 15 min Read , it's all solved now you make cross-origin requests safely , As this Blog was a short introduction to CORS , you can have much more on these resources W3C Cors enabled and another one

** And that's it , Feel Free to Connect with Me 😀 **
And also you can checkout my new blog
Hxrtaj Writes

Hurry Up !! Developers A new supportive community is here

Hartaj-Singh-Dev — Sat, 10 Apr 2021 06:31:41 +0000

Only developers' is an online community for both newbie coders and professional Programmers , It is the place where a newbie can ask for help, and professionals can get their project team members and also help new coders with their projects. you can share your screen and seek help from professionals Our Clear vision is to help programmers to master their skill set and tackle errors. If you join the community then it would be very beneficial to you also and other developers also, In the server there would be other developers with whom you can team up and do exciting projects and also we have voice channels where you can share the screen and take help with your error, Comm'n all developers we can create a community where we help each other and grow, hurry up join now or otherwise you will lose the opportunity, discord Link:- https://discord.gg/d2X8jxyj6y

Developers just try to join the server, I bet you will not regret it, There are specific Voice Channels where you can share your screen and ask for help ,Hope You will definitely Look after this