How to modify HTTP Headers in Chrome, Firefox, Edge & Safari browsers?

HTTP(s) Headers are key-value pairs that the client or server can use to pass additional information along with an HTTP(s) request or response.

Headers carry data about the data being transferred. The ability to modify the headers of traffic that pass through your browser easily is what every developer would want to have.

Use cases

By modifying headers, developers can manipulate the behavior of web servers and clients, enabling advanced functionalities and enhanced browsing experiences. Some of the examples follow:

• Use Requestly to open websites in the iframe for testing. Find more details here.
• Use Requestly to remove Content-Security-Policy header.
• Use Requestly to access the Kubernetes dashboard by modifying the Authorization header. Find more details here.
• Use Requestly to change the Content-Type of the requested resource.
• Use Requestly to test sites in production by bypassing CORS issues. Find more details here.
• Use Requestly to add custom request headers.

How to modify HTTP headers using Requestly

1. Install the Requestly browser extension and click on New Rule in the Top-Right.

1. Next, Select the Modify Headers Rule from the list of rules. This should navigate you to the rule editor.
2. Define for which requests you want the modifications to be made.

   eg: If you want to bypass CORS for production.com/api

   

3. Select Response headers to override the headers

   

4. Save the rule.

Test if the headers are modified on the configured site.

Response Headers modification done by Requestly are not visible in Browsers devtool but they are actually modified.