The Good, The Bad and The CORS.
So over the past weeks, i was working on a task and had to deal with deadlines but then i encountered the villian name CORS, it almost took my life, here in this article, i’ll write Who, Why and How to avoid/fix CORS
Hey everyone.
Have you ever come across website images that you liked and tried to reference them on your own blog or page? But when you copied the link and pasted it into your blog, you found out that the image was broken? Only to then copy the link again and paste it in the URL to see that it opens fine? or maybe you tried to fetch data from an API and you got a 405 error?
This happens due to CORS or Cross Origin Resource Sharing. Let’s take a closer look.
If you’re on a page on Domain X, and there’s an image being fetched from Domain Y, we consider Domain X the origin and Domain Y a cross-origin. Browsers have specific rules for accessing cross-origin resources, which are mainly allowed through Access-Control-Allow-Origin.
If the response from Domain X didn’t have Access-Control-Allow-Origin, then fetch requests and images can only be retrieved from Domain X. On the other hand, if the ‘Access-Control-Allow-Origin’ header has a different value from the origin, and Domain X allows Domain Z, but the page retrieved from Domain X is requesting resources from Domain Y, you might encounter ‘OPTIONS 405 Method not Allowed (Preflight failed)’ message.
If Domain X allows resource access to Domain Y, we need to make sure to check if Domain Y allows the methods and headers. To do that, we have to send OPTIONS Preflight before sending the resource request. This is an issue when Domain Y doesn’t even support OPTIONS.
One more thing, if the request header field “Content-Type” is not allowed, this could also be a problem.
First how did i get myself in this mess? (because that was what inspired this article)
I was contracted to work on a project that required me to fetch data from an external API, consume them into a CMS, restructure the data and then create endpoint(s) from the CMS to be consumed in a javascript framework (react) app.
Ok let’s start, the API was live already, so it was easy to access, the CMS was still on localhost, fetch was not fetching, i had to move the CMS to production.
WHO/WHAT IS CORS?CORS is a crucial security feature implemented in web browsers to prevent web apps from accessing resources that are not hosted on their own domain. It enables web developers to regulate which resources can be accessed by which sites. This feature plays a pivotal role in safeguarding sensitive information, such as user account details, and in preventing cross-site scripting attacks. Fundamentally, CORS functions like a security guard, securing confidential data and wearing off potential intruders. in short CORS is a funny way of saying “hands off my stuff” to other websites.
WHY CORSCORS is an important concept that serves to mitigate security risks when different
domains are attempting to access or share resources within web applications. By leveraging
browser-based security models and protocols, CORS ensures that only authenticated
and authorized sources are granted access to crucial information, thereby creating
a safe wall against malicious attacks.
In essence, CORS is a geeky shield that protects precious digital assets from external
threats while grooming a collaborative web ecosystem.
It was hard getting a solution that works because the CORS error took me a while to hurdle through as i have tried different solutions i could think of and lay my hands on but instead of solution to forthcome, it was deadline. (haha, chuckles in danger)
after a good amount of google search, i found a solution that worked for me, Ironically, it was a chrome extension, i was like “what the heck, i’ll try anything at this point” and it worked like magic.
The Extension: CORS Unblock -> https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino/
This extension was super helpful and i was able to meet up with the deadline. (haha, chuckles in victory)
Thank you for reading this far, and if you ever run into a CORS problem, this might be very very helpful.