在Visual Studio Code中配置HTTP Proxy

为什么使用HTTP Proxy

• 隔离代码与环境，简化业务调试。

  在开发测试的过程中，产品的功能存在多种对接情况，而且对接环境复杂，再加上安全访问，业务调试更为复杂。特别是前后端分离项目，通常会涉及跨域、Cookie、Header鉴权以及更复杂的跨堡垒机调用等问题。Alibaba Cloud Toolkit的HTTP Proxy功能无需修改代码，便可将业务代码与环境隔离，将复杂的业务调试请求简化管理，大幅度提高了测试效率。

• 一键切换不同代理配置。

  在测试环境的代码中通常会添加通过代理进行请求转发的配置，但在产品发布时需要删除该配置，甚至涉及多套测试环境，致使本地测试再次启用比较繁琐。Alibaba Cloud Toolkit的HTTP Proxy功能支持保存历史的HTTP Proxy配置，即开即用，大幅度提升了测试环境复用率，降低资源成本。

• 接入简洁，便捷使用。

  您无需安装Nginx和Charles等代理工具，只需在Visual Studio Code中搜索Alibaba Cloud Toolkit插件并嵌入，即可实现前后端联调。

原理介绍

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

在Visual Studio Code的HTTP Proxy中配置了用于接收请求的端口（如：18002）和用于请求转发的Target Server地址（如：HTTP://192.168.0.1:80）。

由于Client和Target Server之间配置了HTTP Proxy，Client（如Browser和Local Server）请求首先通过监听端口（如：18002）发送至HTTP Proxy，最后HTTP Proxy依据配置的Target Server转发路径将请求发送至Target Server。

Target Server监听HTTP Proxy转发的请求，并下发或者转发至相应的业务。

操作步骤

1. 在Visual Studio Code左侧菜单栏中单击Alibaba Cloud Toolkit入口图标，并展开TOOLKIT > HTTP Proxy。
   
2. 在HTTP Proxy View页签单击Add Proxy。
3. 在Add Proxy页面进行配置。
   1. 在Add Proxy页签进行通用配置。
      • Name：HTTP Proxy配置的名称，例如：ACT系统测试。
      • Target Server：需要代理的目标服务器，例如：阿里云官网。
        说明 支持HTTP和HTTPS两种网络协议。
      • （可选）Header：添加的HTTP或者HTTPS协议的头部内容。
      • （可选）Parameter：添加的请求参数内容，回车即可换行。
      • （可选）Cookie：添加Cookie内容。
   2. 在Advanced进行监听端口、跳转机和跨域访问等高级配置。
      • 监听端口：本地代理的访问端口，即代码访问的本地代理的端口；默认端口为18002，如果出现端口冲突，那么请修改此参数。
      • 可选：（可选）Agent Server：Agent服务器的IP地址。

        如果目标服务器必须通过域名访问，且每次需要修改Hosts文件，那么该设置项为域名所对应的IP地址。

      • （可选）Access-Control-Allow-Origin：跨域访问开关，默认开启。 当您请求需要进行跨域转发时，可开启该开关。
   3. 单击OK。
4. 在HTTP Proxy View页签中的代理列表中，单击Actions列的开关开启代理功能。
   

   HTTP Proxy配置启动后，您可以单击Copy便捷的获取代理地址，进而进行访问。

   说明 如果您不需要使用该代理配置时，请关闭HTTP Proxy开关，再次使用时开启开关即可。

   

更多信息

• 如果您需要修改HTTP Proxy的配置信息，请在HTTP Proxy View页面单击代理列表的Actions列中的Properties，并依据界面提示进行修改。
• 如果您需要删除创建的HTTP Proxy，请在HTTP Proxy View页面单击代理列表的Actions列中的Remove。