HTTP Proxy是Alibaba Cloud Toolkit提供的以HTTP協(xié)議為主且在本地啟動的正向代理服務器，協(xié)助您完成業(yè)務請求的代理轉(zhuǎn)發(fā)。本文介紹如何在Visual Studio Code中配置HTTP Proxy。

前提條件

已安裝Alibaba Cloud Toolkit，具體請參見在Visual Studio Code中安裝和配置Cloud Toolkit。

為什么使用HTTP Proxy

  • 隔離代碼與環(huán)境，簡化業(yè)務調(diào)試。

    在開發(fā)測試的過程中，產(chǎn)品的功能存在多種對接情況，而且對接環(huán)境復雜，再加上安全訪問，業(yè)務調(diào)試更為復雜。特別是前后端分離項目，通常會涉及跨域、Cookie、Header鑒權(quán)以及更復雜的跨堡壘機調(diào)用等問題。Alibaba Cloud Toolkit的HTTP Proxy功能無需修改代碼，便可將業(yè)務代碼與環(huán)境隔離，將復雜的業(yè)務調(diào)試請求簡化管理，大幅度提高了測試效率。

  • 一鍵切換不同代理配置。

    在測試環(huán)境的代碼中通常會添加通過代理進行請求轉(zhuǎn)發(fā)的配置，但在產(chǎn)品發(fā)布時需要刪除該配置，甚至涉及多套測試環(huán)境，致使本地測試再次啟用比較繁瑣。Alibaba Cloud Toolkit的HTTP Proxy功能支持保存歷史的HTTP Proxy配置，即開即用，大幅度提升了測試環(huán)境復用率，降低資源成本。

  • 接入簡潔，便捷使用。

    您無需安裝Nginx和Charles等代理工具，只需在Visual Studio Code中搜索Alibaba Cloud Toolkit插件并嵌入，即可實現(xiàn)前后端聯(lián)調(diào)。

原理介紹

配置HTTP Proxy原理如下圖所示。

Http代理原理圖

在Visual Studio Code的HTTP Proxy中配置了用于接收請求的端口（如：18002）和用于請求轉(zhuǎn)發(fā)的Target Server地址（如：HTTP://192.168.0.1:80）。

由于Client和Target Server之間配置了HTTP Proxy，Client（如Browser和Local Server）請求首先通過監(jiān)聽端口（如：18002）發(fā)送至HTTP Proxy，最后HTTP Proxy依據(jù)配置的Target Server轉(zhuǎn)發(fā)路徑將請求發(fā)送至Target Server。

Target Server監(jiān)聽HTTP Proxy轉(zhuǎn)發(fā)的請求，并下發(fā)或者轉(zhuǎn)發(fā)至相應的業(yè)務。

操作步驟

  1. 在Visual Studio Code左側(cè)菜單欄中單擊Alibaba Cloud Toolkit入口圖標ACT入口圖標，并展開TOOLKIT > HTTP Proxy。
    HTTP Proxy入口
  2. 在HTTP Proxy View頁簽單擊Add Proxy。
  3. 在Add Proxy頁面進行配置。
    1. 在Add Proxy頁簽進行通用配置。
      • Name：HTTP Proxy配置的名稱，例如：ACT系統(tǒng)測試。
      • Target Server：需要代理的目標服務器，例如：阿里云官網(wǎng)。
        說明 支持HTTP和HTTPS兩種網(wǎng)絡協(xié)議。
      • （可選）Header：添加的HTTP或者HTTPS協(xié)議的頭部內(nèi)容。
      • （可選）Parameter：添加的請求參數(shù)內(nèi)容，回車即可換行。
      • （可選）Cookie：添加Cookie內(nèi)容。
    2. 在Advanced進行監(jiān)聽端口、跳轉(zhuǎn)機和跨域訪問等高級配置。
      • 監(jiān)聽端口：本地代理的訪問端口，即代碼訪問的本地代理的端口；默認端口為18002，如果出現(xiàn)端口沖突，那么請修改此參數(shù)。
      • 可選：（可選）Agent Server：Agent服務器的IP地址。

        如果目標服務器必須通過域名訪問，且每次需要修改Hosts文件，那么該設(shè)置項為域名所對應的IP地址。

      • （可選）Access-Control-Allow-Origin：跨域訪問開關(guān)，默認開啟。 當您請求需要進行跨域轉(zhuǎn)發(fā)時，可開啟該開關(guān)。
    3. 單擊OK。
  4. 在HTTP Proxy View頁簽中的代理列表中，單擊Actions列的開關(guān)開啟代理功能。
    HTTP proxy配置成功

    HTTP Proxy配置啟動后，您可以單擊Copy便捷的獲取代理地址，進而進行訪問。

    說明 如果您不需要使用該代理配置時，請關(guān)閉HTTP Proxy開關(guān)，再次使用時開啟開關(guān)即可。
    使用代理訪問成功

更多信息

  • 如果您需要修改HTTP Proxy的配置信息，請在HTTP Proxy View頁面單擊代理列表的Actions列中的Properties，并依據(jù)界面提示進行修改。
  • 如果您需要刪除創(chuàng)建的HTTP Proxy，請在HTTP Proxy View頁面單擊代理列表的Actions列中的Remove。