How to override API request body using Javascript

Introduction

Overriding HTTP request payload is a process of updating the request data/body sent by client to your API server. We can achieve this by using Requestly’s Modify Request body rule.

Use-cases

• Testing different edge cases: You may modify an API request payload to include an invalid or unsupported field. The server will likely reject the API request and return an error message.
• Primarily used in sending additional data in request payload to the API server: There might be situations where additional data needs to be sent in request payload to the API server when making a POST or PUT request.
• Modifying GraphQL Queries: GraphQL queries can be modified by modifying the request body of the request. This can be done by changing the query string or variables in the request body.

Overriding HTTP request payload using Javascript

Let’s see an example for modifying API request body on https://www.agoda.com/en-in/.

1. Install the browser extension.
2. Goto Requestly and create a new Modify Request Body rule.
   Screen Recording 2023-12-13 at 2.01.08 PM.mov
3. Specify the URL condition and enter /GetTopDestinations.
4. Select Programmatic (JavaScript) option to modify the request body using JavaScript code. Update the requestType for top destinations request from “International” to “Domestic”.
   

How to test if the request body was modified?

There are multiple ways to validate when a rule is successfully applied on a page. You can check out the documentation here.

To check whether the request body is modified, you can also inspect the HTTP request body in Chrome DevTools. You should see the overridden body is sent to the server.

Learn more

• https://requestly.com/blog/how-to-modify-the-api-request-body/
• https://developers.requestly.io/http-rules/modify-request-body/
• https://docs.requestly.io/guides/know-if-rule-executed-on-page