I am sure that every developer has come across at least one annoying CORS error before, and if you are new to coding and haven't experienced it yet, it's coming!

When I think of CORS, I think of that annoying bug that flies around your face when you are trying to get work done on your computer (maybe that's just because that's been my situation for the past twenty minutes 🙄). The point is, it's easy to want to find a quick fix for it on google in order to move on to more exciting things.

Something I have learned in the past few weeks is that having a deeper understanding of why something breaks or isn't going your way is much better than trying to bypass it as quickly as possible, even if the process ends up taking longer. I say this for many reasons. The first reason being that when the same (or similar) problem happens in the future, I will have an indication of where to start solving it - if I don't already know the solution. Another reason is because of the learning process. When I was researching CORS, I was forced to dig deeper into multiple topics that were all connected to CORS in some way, which ultimately helped me understand the bigger picture better.

Now enough about the benefits of the research process and on to what I learned about CORS:

CORS stands for Cross Origin Resource Sharing, and to make the definition as obvious as possible, it is a browser-based mechanism that allows services to share resources across different origins.

The server is able to specify which services are allowed to access its resources via HTTP headers. For example, a browser will send an HTTP request (with its origin) to a server with request headers and the server will reply with HTTP response headers (letting the client know if that origin is allowed).

Examples of CORS response headers:

• Access-Control-Allow-Origin: Indicate which origins can access its resources (* can be used to allow all)

• Access-Control-Allow-Methods: Specify which methods are allowed to be used (ex. GET, POST, PUT, OPTIONS)

• Access-Control-Allow-Headers: Indicate which headers can be used

If the request headers follow all of the rules of the response headers, then CORS is enabled properly and the resources can be shared across the different domains. If you are getting a CORS error, take a look at the response headers being provided by the server and make sure that you are allowing the client origin. Sounds easy enough! Of course there's more to CORS than I mentioned here, like preflight requests, API gateways, etc, but I am happy that I can now understand why a console yells about CORS.

Ultimately, the reason I don't hate CORS anymore is because I have a better understanding of it now. So I will keep that in mind the next time I encounter a bug (not referring to the one that was flying around my face earlier, that one had to go)!

Resources:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#:~:text=The%20same%2Dorigin%20policy%20is,documents%2C%20reducing%20possible%20attack%20vectors.