How to load a different API response in frontend code?

Sahil Gupta

December 22, 2023

2MIN READ

Introduction

Almost every website/app we interact with needs to make a call to the server to fetch its resources. Depending on its requirements, it can make requests such as an API, document, scripts (JS/CSS), etc. To make this request, the client makes a request using HTTP protocol, which then returns the content as the response body to the request. This content is then used to render the webpage.

During development, it becomes hard to modify the server’s content repeatedly to check if the webpage is working properly. So in this article, we will explore how to change the response body of HTTP requests without making actual changes in the server content using Requestly Response Rule.

Use Cases

Testing APIs when the backend is not ready yet.
Test Application behavior when the response body is modified.
Security Analysis to identify vulnerabilities in web applications.

Modifying HTTP response body using the desktop app

Firstly, to change the response body, it’s recommended to download Requestly’s desktop app, which can modify any API/HTML/CSS/JS scripts. You can use the Requestly browser extension if you prefer a lightweight approach. The steps are explained later in the blog.

Let’s say you want to change the response of API which fetches the Quick-peek of links on wikipedia. To do that:

Download and Install the Requestly desktop app.
Open the app, and click Connect Apps.
Choose the browser you want to launch.
Launch https://en.wikipedia.org/wiki/HTTP on the browser.
Search for https://en.wikipedia.org/api/rest_v1/ and select the request you want to modify. There are two ways to override the response body of a JS file: Static Override and Programmatic Override.
Right-click on the request and click Modify Response Body.
Select REST API in the pop-up and modify the response body, which was auto-filled. We will be changing the response to Steve Jobs .
Now save the rule by clicking Create Rule, and try to hover over the links on wikipedia. You will see that all the quickpeeks will show Steve Jobs now.

💡 Here’s the shared-list for the above rule.

Modifying response body using Requestly browser extension:

If you wish to have a more lightweight approach, albeit not a straightforward one, you can install Requestly’s browser extension to modify the HTTP request body of a website.

Install the Requestly browser extension.
Go to Rules, and create a Response Rule.
Select REST API and enter the request URL you want to modify.
Fill in the modified response body of the request.
Now save the rule by clicking Create Rule, and try to hover over the links on wikipedia. You will see that all the quickpeeks will show Steve Jobs now.

💡 Here’s the shared-list for the above rule.

Sahil Gupta

Sahil is co-founder at Requestly and is an amazing engineer. He leads the planning and execution of engineering team at Requestly.