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

Prerequists:-

1. Having knowledge about how HTTPS works
2. Have basic knowledge how web works
3. 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