CORS is simply a frontend limitation

Introduction

So you’re a frontend dev and have been doing this frontend thing for a while. You’re tasked to fetch todos from the an API hosted at http://todoapp.com. When you call the todos endpoint, you encounter this stupid error.

Somehow you google the error and in your attempt to fix it, you encounter CORS anywhere.

You don’t read the instructions on the CORS anywhere website and simply append it to the backend API you’re trying to use, and it somehow magically works.

https://cors-anywhere.herokuapp.com/http://localhost:8080

You eventually abandon the project and don’t encounter the CORS thing again until a few months time. Everytime you try to call an API, there’s this big bad bouncer called CORS frustrating your life. But who is this bouncer and why is he always out for us? In this article, you will learn about CORS and how to prevent CORS issue like you actually know your stuff.

What is CORS?

In simple terms, CORS is a security mechanism that is implemented in browsers to prevent websites from accessing data from other websites that live on different origins. So if you have your website for showing pet memes https://[petmemes.com](<http://petmemes.com>) but you currently only display cat memes. Now, if you want to expand to show dog memes, you find out your friend has a website https://[dogmemes.com](<http://dogmemes.com>) that shows dog memes. These memes are exposed via an API at https://dogmemes.com/api. petmemes.com is your origin while dogmemes.com is your friend’s origin. If you make a request from petmemes.com to dogmemes.com you will encounter this CORS error.

How Does CORS Work?

When a frontend application tries to make a request to an API, the browser checks if the API and the frontend application have the same origin. If the origins are the same, the request goes through, and the frontend application can access the data from the API. If the origins are different, the browser blocks the request and throws a CORS error.

Why Do We Need CORS?

CORS is important for web security. It prevents malicious websites from stealing data from other websites. Imagine if any website could access your bank account information or your social media accounts. That would be a disaster! CORS protects users by preventing unauthorized access to their data.

How to Fix CORS Errors

There are a few ways to fix CORS errors.

One way is to configure the server to allow requests from other origins. This is done by setting the Access-Control-Allow-Origin header to the origin of the frontend application.

Another way is to use a proxy server like CORS Anywhere. A proxy server acts as a middleman between the frontend application and the API. The frontend application makes a request to the proxy server, and the proxy server makes a request to the API. The API responds to the proxy server, which then responds to the frontend application. This way, the browser thinks that the frontend application is making a request to the same origin, and the CORS error is avoided.

Conclusion

CORS is a security mechanism that is implemented in browsers to prevent malicious websites from stealing data from other websites. It can be frustrating for frontend developers, but it is an important feature that protects users. There are ways to fix CORS errors, such as configuring the server or using a proxy server, but it is important to understand why CORS exists and how it works