Debugging CORS

What is CORS?

Cross-Origin Resource Sharing. It is a security feature on the browser that enables the browser to protect resources on another origin being called from one origin.

It is simple yet debugging it sometimes is cumbersome, mostly because of a lack of understanding of CORS. One big thing that I missed when dealing with Cors error is that Cors security flags are controlled from the backend and they are just response headers.

Let me give you an example.

Origin here is the URL we are requesting on the browser.

Example Scenario 1: Your app at example.com calls api.example.com. If the server allows requests from example.com (as specified in CORS headers), all are smooth—no errors.

Example Scenario 2: Now, picture your app example.com reaching out to blabla.com. Server blabla.com has response headers saying that requests are only allowed from the same origin. The browser blocks the interaction, ensuring a secure barrier against unauthorized cross-origin requests.

Example Scenario 3: Now, picture your app example.com reaching out to blabla.com. Server blabla.com has response headers like…