Interceptor

You can access APIs blocked by Cross-Origin Resource Sharing (CORS) restriction by using either Hoppscotch Agent, Proxyscotch or custom middleware. You can also use the Hoppscotch web extension to intercept requests and responses.

​

Hoppscotch Agent

The Hoppscotch Agent is a micro application designed to mitigate the challenges posed by CORS in modern web browsers. Acting as a local intermediary, it intercepts API requests made through the Hoppscotch web app and reroutes them through your local machine. This means that the Hoppscotch Agent handles requests using your local network configuration.

1. Download the Hoppscotch Agent for your operating system:

2. Launch the Hoppscotch Application and navigate to the “Interceptors” section in the “Settings” page.
3. Locate the “Agent” option within the Interceptors section to initiate a connection to your local agent.
4. The application will prompt you for a “One-Time Verification Code”. This verification code will be generated within the Hoppscotch Agent.
5. Enter the verification code into the application to establish a secure connection.

Once connected, all API requests made through the Hoppscotch web app will be routed through Hoppscotch agent, effectively eliminating CORS-related issues.

​

Proxy

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

​

Middleware

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

​

Browser extension

1. Install the browser extension from the below links:

   • Chrome
   • Firefox

2. Click on the Hoppscotch Browser Extension icon from the browser toolbar and ensure that hoppscotch.io is in your active origins. If you are using Hoppscotch Self-Host, add your own domain as a new origin

3. Refresh the Hoppscotch web app.

4. Open the interceptor and change the middleware to the browser extension

   You can either go to the settings and enable the use of the browser extension as shown below:

   Or you can open the interceptor menu and change the middleware as shown below:

   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.