Mocking request and response with Charles Proxy and Postman
Hello lovely people! Sometimes we need to test a specific scenario but we don't have proper privileges or access to modify backend responses, would be great mock them, right? right! So, let’s do this using a proxy and an endpoint with your custom JSON.
This article is pretty practical: Intercept responses (using Charles Proxy) and before returning to the client (app, browser, etc) we’ll update the payload with a custom JSON (using a mocked server with Postman)! Here we go!
Quick Setup for Android Users (Optional)
If you aren't using an android device, you can skip this step! Matter of fact, Charles has good documentation for your scenario: https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/
After installing Charles Proxy go to Help > SSL Proxying > Install Charles Root Certificate on a Mobile Device or Remote Browser!
Here we have 2 steps to install a certificate:
- Set an HTTP Proxy on the WIFI connection
- Install Charles Certificate
Access wifi’s settings and switch the Proxy option to Manual and put the values above, my example:
After this, let’s access https://chls.pro/ssl on your device, download the .pem file and install it.
This step is quite tricky! but you can find many articles here on medium or Charle’s FAQ page. Anyway, you can ping me in the comments below.
Postman
First of all, let’s create samples for our requests to use them as our mocked server! Postman will provide an URL and use examples as a mocked response, it’s beautiful.
We’ll need a collection and a request, after this click on the menu button and add an example, like the image below:
After this change, the payload, URL, content type, etc… all set up click on save!
Now let’s create a new server in the Mock Servers section:
Now that we’ve created it, all requests are displayed here, even those not mapped (see arrows in blue).
Ok! Now we can copy the base URL, concatenate with our endpoint sample and test it:
Nice! We have a mocked endpoint!
Charles Proxy
Now the climax! Let’s intercept a request and map the response.
By default, secure requests shows encrypt data, as you can see:
Let’s repeat our request, that will be appear in Charles's request list, then right-click the button on it, and Enable SSL Proxying:
From now on, every new request will be decrypted for us! You can check it in the Content tab and select the JSON tab below.
We have two approaches to replace a response or request using a proxy like Charles: With breakpoint (every request will pause and you can customize fields and options) or mapping a redirect to another endpoint (our mock from Postman).
Let’s follow with the second approach: Right-click at our request, then click on Map Remote, then a wild pop-up will appear:
Last things last… let’s repeat our request and see our mocked results!
Annnnd here we go!
It works! My client (android app) retrieve the mocked JSON and at Charles Proxy we can check it as well.
Extra Option! Map Local…
Charles Proxy gives us an offline possibility: set a JSON file as result. So, Right-click on our request, then Map Local.
Now we select the JSON file! That’s it!
Thanks to Wellington Ribeiro for the local map tip. And thanks to Felipe Saraiva for the English review ;)
Did you like it? Don’t forget to like, subscribe, share, and… Just kidding! Have a lovely day!
