Bypass CORS errors while testing your APIs using Hoppscotch 🔧

Are you tired of encountering CORS errors while developing your applications and APIs too? Well, I certainly am. But guess what? I’ve got a solution for you. Use Hoppscotch to bypass CORS errors like never before. But before we dive into the solution, let’s first understand what Interceptors are…

Interceptors act as gatekeepers between the client and the server. The requests you make and the responses you receive are bound to strike them. Interceptors can modify or observe the request before it reaches the server and also do the same for the response before it gets to the client. They add a bit of enhancement to the communication between the client and server, allowing you to sprinkle your custom actions on the data being exchanged.

But Why do we need Interceptors? 🤔

Let’s take a closer look at why interceptors are so valuable. We’ll walk through some everyday situations where interceptors shine and save the day.

Interceptors can be used when you want to check before making a request if your credentials are valid. So, instead of making an API call, you can check at the interceptor level that your credentials are valid.

Suppose you’re developing an application that relies on an external API. Before each request, you need to ensure that the user has the necessary permissions to access the requested resource. Instead of sending the request blindly and handling potential authorization errors, interceptors step in. By intercepting the request, you can perform a quick authorization check, ensuring that only authenticated and authorized users proceed, thereby enhancing the security and integrity of your application.

Another use case is when you want to optimize network bandwidth by compressing outgoing API requests. With interceptors, you can intercept requests before they are sent and compress the payload on the fly. This minimizes data transfer size, reduces latency, and optimizes network performance without the need for additional server-side configurations.

What is CORS though? 🚫

Cross-Origin Resource Sharing (CORS) is a mechanism that allows a website from one URL to request data from a website on another URL. But it’s not as simple as it sounds. Sometimes, while fetching data from the API, requests keep failing due to encountering a CORS error on the console.

This happens because the different browser implements similar CORS policies, granting access to make requests to the same URL but rejecting requests from an external URL unless certain policies are satisfied.
When a browser makes a request, it adds an origin header to the message. If that request goes to the server on the same origin, then the response is shipped to the request with no questions asked. Otherwise, the request fails due to a CORS error.

Since CORS is as simple as adding some HTTP headers, it’s only blocked by the browser. You can build a proxy-like component that will make a call for you and get the response from the desired API.

How can Hoppscotch help you intercept the API calls? 👽

You can access APIs blocked by CORS restriction by using either Proxyscotch or custom middleware. You can also use the Hoppscotch web extension to intercept requests and responses in Hoppscotch.

1. Proxyscotch ⚙️

Just like how you give proxy attendance for your friend in college, a proxy server acts like a stand-in user, keeping the real client private, requesting resources on your behalf to the destination, and receiving a response. The middleware proxy in Hoppscotch is implemented using a hosted proxy server called Proxyscotch.

Proxyscotch is a free and open-source proxy server that is specifically designed for use with Hoppscotch. It is easy to set up and use. Proxyscotch allows you to bypass CORS restrictions and modify your requests and responses.

You can enable the proxy from the “Settings” page and replace the Proxy URL with your proxy middleware if you wish.

2. Browser Extension 🧩

The Browser extension in Hoppscotch is a feature that allows you to send requests from your local machine. This is useful if you are testing an API that is not yet deployed to a production server.

Hoppscotch has browser extensions for Chrome and Firefox. Download the browser extension from the Firefox Add-ons or Chrome Web Store and enable it across the Hoppscotch window by clicking on the Hoppscotch Browser Extension icon from the browser toolbar, ensuring that hoppscotch.io is in your active origins.

The origin list defines the URLs that the extension can connect to. If you’re using hoppscotch.io, then you do not need to add any other origins. However, if you are using a self-hosted instance, you should add the domain of your self-hosted instance as an active origin.

And that’s a wrap. If you ever find yourself grappling with CORS errors again, remember that Hoppscotch is here to help. Thank you for reading until the end.

Hoppscotch is very close to 60,000 GitHub Stars ⭐, so if you haven’t already, please check out Hoppscotch today. Join our Discord server to get your queries resolved by the Hoppscotch community.

Thank you again for your support. Peace✌️