stack twitter rss linkedin cross

Wilco van Esch

Skip to main content

Search results

    Mocking API requests and responses through Charles Proxy

    As a prerequisite to the below, ensure the SSL proxying settings and certificates are set and Charles is logging requests from the browser you're targeting.

    Map Local

    You can define modified response bodies to be loaded instead of the actual responses.

    First, ensure the following rewrite rule is in place for CORS:

    1. Under Tools, select Rewrite...
    2. Ensure the Enable Rewrite checkbox is checked
    3. Add a new rule
    4. Add the relevant URIs (you can use an asterisk as a wildcard)
    5. Add the actual rule
      Type: Modify Header
      Where: Response
      Name: X-Charles-Map-Local
      Replace:
      Name: Access-Control-Allow-Origin
      Value: *
    6. Ensure the rule is checked
    7. Apply it
    8. Reload the page with the request you're targeting

    Then create the modified response to map to:

    1. In a browser, open up the developer console's Network tab
    2. In the browser, trigger the response you want to modify
    3. Copy the response
    4. Paste the response into an editor which parses it nicely
    5. Modify the response to whatever you would like to see (whilst remaining valid)

    Then map to it:

    1. Under Tools, select Map Local...
    2. Ensure the Enable Map Local checkbox is checked
    3. Add a new mapping
    4. Add the relevant URIs (you can copy the URI from the browser request and paste it in the Host field, Charles will break the URI into the appropriate fields once you move focus away from the Host field)
    5. Choose the local response file to map to
    6. Save the mapping
    7. Ensure the mapping is checked (and that potentially conflicting mappings are not checked)
    8. Reload the page with the request you're targeting

    Rewrite

    You can enable or disable rewrites of request/response bodies, parameters, or status codes to be in place whenever you use the targeted URI(s).

    1. Under Tools, select Rewrite...
    2. Ensure the Enable Rewrite checkbox is checked
    3. Add a new rule
    4. Add the relevant URIs (you can copy the URI from the browser request and paste it in the Host field, Charles will break the URI into the appropriate fields once you move focus away from the Host field)
    5. Add the actual rule
    6. Ensure the rule is checked (and that potentially conflicting rules are not checked)
    7. Apply it
    8. Reload the page with the request you're targeting

    Example rules:

    Type: Response Status
    Where: Response (automatic)
    Match - Value: 200
    Replace - Value: 500

    Type: Body
    Where: Response
    Match - Value: "Expires":"2018-07-31T14:44:44Z"
    Replace - Value: "Expires":"2018-07-31T14:49:44Z"

    Type: Body
    Where: Request & Response
    Match - Value: Details
    Replace - Value:

    Type: URL
    Where: Request (automatic)
    Match - Value: register
    Replace - Value: asdf

    Type: Modify Query Param
    Where: Request (automatic)
    Match - Name: LanguageCode
    Match - Value: en
    Replace - Name: LanguageCode
    Match - Value: jp

    Breakpoints

    You can target requests 'live' where Charles will interrupt further requests and allow you to edit its parameters and continue with the changed parameters.

    1. Under Proxy (or from the toolbar), select Enable Breakpoints
    2. Under Proxy, select Breakpoint Settings...
    3. Add a new breakpoint
    4. Select whether you want to target a GET or POST request in the Scheme field
    5. Add the relevant URIs (you can copy the URI from the browser request and paste it in the Host field, Charles will break the URI into the appropriate fields once you move focus away from the Host field)
    6. Select whether you want to target the request and/or the response
    7. Ensure the breakpoint is checked (and that potentially conflicting breakpoints are not checked)
    8. Trigger the request in the browser
    9. Edit the parameters as desired
    10. Execute the amended request/response
    11. Return to the browser