➜ Old React website
Chung Cheuk Hang MichaelJava Web Developer
Java 8：Group 起一個 List<Item>SQL 基礎 - SQL Server

Charles 代理伺服器

Table of contents

1 Charles Proxy 用途
Charles 係一個 proxy（代理伺服器），即係一個虛擬既中間人 server，有能力截取通過呢個 proxy 通訊既 HTTP/HTTPS（SSL）既請求及響應內容，所以可以用喺開發既時候除錯 web applications。

2 設定 Charles

2.1 主程式設置
  • Windows
    1. Proxy > SSL Proxying Settings... > SSL Proxying tab > Add > Host: *
    2. Help > SSL Proxying > Install Charles Root Certificate
    3. In the Certificate popup window, Install Certificate...
    4. Store Location: Local Machine
    5. Place all certificates in the following store, Browse..., Trusted Root Certification Authorities
    6. Main UI > Start SSL Proxying
  • macOS
    1. Proxy > SSL Proxying Settings... > SSL Proxying tab > Add > Host: *
    2. Help > SSL Proxying > Install Charles Root Certificate
    3. In the Add Certificates popup window, Keychain: System, Add
    4. In System Keychains > System, Search for Charles
    5. Right-click Charles Proxy CA > Get Info
    6. Expand Trust > When using this certificate > Always Trust

2.2 截取 Android 手機 HTTP/HTTPS 內容
  1. 主程式設置
    • Windows
      1. Make sure Windows Defender Firewall settings allow the Charles app
        • Check the checkbox next to the app and checkboxes under both private and public
      2. Proxy > Proxy Settings... > Enable transparent HTTP proxying
      3. Help > SSL Proxying > Install Charles Root Certificate on a Mobile Device or Remote Browser
    • macOS
      • TBC
  2. Android 手機設置
    1. Wi-Fi > Configure the current Wi-Fi
    2. Add the IP to Charles on Windows: Proxy > Access Control Settings... > Add
    3. Proxy: Manual, IP and Port: refer to the popup in Charles
    4. In Chrome, navigate to the URL mentioned in popup in Charles (i.e. chls.pro/ssl)
    5. SSL certificate (.crt) is downloaded automatically, click on it
    6. Enter Android password
    7. Give the certificate a name (e.g. Charles), Credential use: VPN and Apps

2.3 其他設定
  • Main UI > Right-click configure column > Check Content-Type
  • Main UI > Settings next to Filter and Focused > Uncheck Auto scroll

3 如何使用 Charles
情境：我地想截取 Jumbo 網頁既 HTTP request 及 response，除左直接喺 Chrome developer tools 度睇之外，Charles 都可以做得到。

3.1 開始記錄 HTTP 流量
首先，換去 Sequence 顯示方式，然後確保 Charles 主介面已經開始記錄 HTTP 流量，而且 SSL proxying 亦都設置好而又開左：
我地可以去 Windows 既 Internet Options 度睇下 Charles 係咪自動幫我地設定好曬：
或者如果用 macOS：

3.2 瀏覽器開始上網
我地而家可以喺 Chrome 打開 https://shoponjc.com/quote.php。

3.3 觀察截取結果
網頁 load 完之後，我地就返去 Charles，觀察 Charles 所截取到既 HTTP requests。
如果 Charles 介面夾雜左其他 domains 既 HTTP requests，可能係因為個系統所安裝既某啲軟件或者瀏覽器既其他網頁喺背後發起 HTTP requests。如果只想專注睇 Jumbo 網站既 HTTP requests，可以隨意搵一個 Jumbo 既 HTTP request，然後 right-click 佢，撳 Focus。
再 check Focused：
咁之後我地就只會見到 Jumbo 網站既 HTTP requests：
然後就好容易搵到下載產品報價數據既 API 係點樣 call：

4 其他程式設定

4.1 Postman
  1. Settings > Proxy > Proxy configurations for sending requests > Check Add a custom proxy configuration
  2. Proxy Type > Check HTTP and HTTPS
  3. Proxy Server > Enter IP and port

4.2 Spring Boot RestTemplate
用以下 code 黎 create RestTemplate object：
final Proxy proxy = new Proxy(Type.HTTP, new InetSocketAddress(getProperty("http.proxyHost"), parseInt(getProperty("http.proxyPort"))));
final SimpleClientHttpRequestFactory requestFactory = new SimpleClientHttpRequestFactory();
requestFactory.setProxy(proxy);

final RestTemplate restTemplate = new RestTemplate(requestFactory);
JVM arguments：
java -Dhttp.proxyHost=<host> -Dhttp.proxyPort=8888 -jar xxxxxx.jar
Spring Boot Maven：
mvn spring-boot:run -Dspring-boot.run.jvmArguments="-Dhttp.proxyHost=<host> -Dhttp.proxyPort=8888"

6330 1333

michaelboyboy@gmail.com

www.linkedin.com/in/mickchung

Copyright © 2025 Chung Cheuk Hang Michael. All rights reserved.
Developed with React, Bootstrap and Next.js.