How to redirect HTTP(s) requests using Requestly.io
In this article, I will talk about the “redirect request” feature of the Requestly.io tool, which I think will benefit us in different areas of our project and which I usually use to compare the existing API with the new API in procedure changes.
What is requestly.io? How to use ?
Requestly is a plug-in or set of plug-ins that can be used to redirect, modify, and manipulate HTTP requests that occur in the browser. It is used by testers and developers to test web applications, simulate different scenarios, redirect requests, debug, modify content, block ads, cache. It allows them to perform operations such as taking or applying security measures.
This tool offers a user-friendly user interface and supports a number of useful features. Some features include URL redirection, page reload, title change, content replacement, ad blocking, request and response matching, loading of local files and much more. With these features, developers can control the behavior of web applications by customizing requests and responses on the browser. Requestly.io is useful for many use cases, such as testing various scenarios, simulating APIs, or improving the performance of websites. It can also be integrated into different platforms (e.g. Chrome, Firefox) and different operating systems (Windows, macOS, Linux) that can run in web browsers.
You can follow the steps below to add the Requestly extension to Chrome:
1.Open the Chrome Web Store: Launch your Chrome browser and click the three-dot icon in the upper-right corner. Then select “More tools” and click “Extensions”.
2.Open the Extensions page: When the Extensions page opens, enable the “Developer mode” option in the top right corner. This option can be activated by sliding the switch next to the three-dot icon.
3.Download the plugin: To download the Requestly plugin, open the link below in your Chrome browser: https://chrome.google.com/webstore/detail/requestly-open-source-htt/mdnleldcmiljblolnjhpnblkcekpdkpa
4.Install the plugin: When you open the link, you will be directed to the Requestly page. Click the “Add to Chrome” button in the top right corner of the page.
5.Start using the Requestly plugin: The plugin will be successfully added to your Chrome browser.
You can add the Requestly extension to your Chrome browser by following these steps. If the extension is successfully added, you can see Requestly’s icon in the toolbar in the top right corner of your Chrome.
If we talk about how to use this tool step by step;
1.Go to Requestly.io website and create an account and then sign in
2.Create a new project to define the redirects and rules. The project allows you to organize your routing and rules for different websites.
3.After creating your project, add a rule. The rule defines the changes you want to make to the URL or HTTP request.
Redirect Rule: Used to redirect a URL to another URL. For example, you can create a forwarding rule to point “www.example.com" to “www.newexample.com".
Replace Rule: Used to replace a specific text or pattern in a URL with another text or pattern. For example, you can replace all “http” on “example.com” with “https”.
Header Rule: Used to make changes to request or response headers. For example, you can add, change or remove a specific title.
Mock Rule: Used to return a mocked response in response to a request to a URL. This can come in handy during the development or testing phases.
4.After creating your rule, activate it for it to take effect.
In our project, I usually use this tool to run API tests when procedure changes are made.
Procedural changes are changes to the operation of an application or a software component. These changes may affect the APIs and these tests may be required to ensure that the APIs are working properly.
Production tests are performed to ensure that the API works correctly after procedure changes in a production environment.
Redirect Request
Redirect request allows developers to redirect web traffic to a different server, block, modify or redirect requests. It can be used for a number of different scenarios. This can be very useful for situations such as fixing bugs during testing or providing a specific response to the API.
First, let’s look at how we redirect Request step by step.
a)Enter the URL you want to redirect to in the “Source URL” field. For example, if you want to redirect to “www.example.com", enter “www.example.com" in this field.
b)Enter the new URL to redirect to in the “Destination URL” field. For example, if you want to redirect to “www.newexample.com", enter “www.newexample.com" in this field.
c)Give a name to the “Rule Name” field (optional).
d)Check the “Active” option. This will enable the rule.
e)Save the rule by clicking the “Save” button.
Practice
If we take a look at my practice, in this article we will use the Spotify website to implement “redirect request”. Before redirecting, let’s examine the response of the Request URL that we will use.
Request URL :
https://www.spotify.com/api/masthead/v1/header?market=tr-tr&forceOneTrust=1Response :
{
"messageBars": [{
"messageHTML": "\u003ca href\u003d\"https://www.spotify.com/tr-en/\" class\u003d\"multi-language-link alert-link\"\u003eTurkey (English)\u003c/a\u003e",
"options": {
"type": "multiLanguage",
"trackingMode": "none",
"cookie": {
"name": "multiLanguage"
},
"multiLanguage": {
"updatePreferredLocaleUrl": "https://www.spotify.com/tr-en/update-preferred-locale/",
"updatePreferredLocaleLinkSelector": ".multi-language-link"
}
},
"dir": "ltr"
}],
"navigation": {
"brand": {
"href": "https://www.spotify.com/tr-tr/",
"alt": "Spotify",
"dataAttributes": {
"data-tracking": "{\"category\": \"menu\", \"action\": \"spotify-logo\"}"
}
},
"user": {
"userIconAlt": "Profil"
},
"mobileMenu": {
"profileLink": {
"href": "https://www.spotify.com/tr-tr/account/overview/",
"alt": "Hesap"
}
},
"nav": [{
"type": "link",
"parameters": {
"href": "https://www.spotify.com/tr-tr/premium/",
"text": "Premium",
"dataAttributes": {
"data-ga-category": "menu",
"data-ga-action": "premium"
}
}
}, {
"type": "link",
"parameters": {
"href": "https://support.spotify.com/",
"text": "Destek",
"dataAttributes": {
"data-ga-category": "menu",
"data-ga-action": "help"
}
}
}, {
"type": "link",
"parameters": {
"href": "https://www.spotify.com/tr-tr/download/",
"text": "İndir",
"dataAttributes": {
"data-ga-category": "menu",
"data-ga-action": "download",
"data-gtm-event-name": "download_spotify_button_clicked",
"data-tracking": "{\"category\": \"download\", \"action\": \"download start\", \"label\": \"download-navbar\"}"
}
}
}, {
"type": "sep"
}, {
"type": "profile",
"parameters": {
"text": "Profil",
"items": [{
"type": "link",
"parameters": {
"href": "https://www.spotify.com/tr-tr/account/overview/",
"text": "Hesap",
"dataAttributes": {
"data-tracking": "{\"category\": \"menu\", \"action\": \"account\"}"
}
}
}, {
"type": "link",
"parameters": {
"href": "https://www.spotify.com/tr-tr/logout/",
"text": "Oturumu kapat",
"isSubtle": true,
"dataAttributes": {
"data-tracking": "{\"category\": \"menu\", \"action\": \"log-out\"}"
}
}
}]
}
}],
"skipLinkText": "İçeriğe atla",
"desktopAriaLabel": "Masaüstü gezinme",
"mobileAriaLabel": "Mobil gezinme"
}
}We can see the items in the response of the request to be used in the UI and in the header banner. We will not be able to see these menus after redirection.
We redirect the request from v1 to v3 and we see the differences in the response, and we get an error because there is no such endpoint.
Redirect URL :
https://www.spotify.com/api/masthead/v3/header?market=tr-tr&forceOneTrust=1Response :
{
"timestamp": "2023-05-24T15:33:14.726+00:00",
"status": 404,
"error": "Not Found",
"path": "/api/masthead/v3/header"
}Therefore, when we forward the request, we see that some menus under this request have disappeared from the header banner, since v3 could not find a response.
Summary
Requestly.io’s redirect request feature provides developers with a powerful tool to route, modify, and analyze web requests. This feature is also useful for API testing, debugging, integration testing.In addition, with its user-friendly interface and easy-to-use, Requestly.io is an effective option to meet testing needs. Thank you for taking the time to read this article, I hope it is useful for you.
Happy Testing 🏄🏻
