Configure an HTTP proxy in Visual Studio Code

Why use an HTTP proxy

• Isolate code from environments to simplify business debugging.

  During development and testing, product features often involve complex integrations. Complex environments and security requirements make business debugging even more difficult. This is especially true for projects with separate front-end and back-end components, which often face issues such as cross-domain requests, cookies, header authentication, and complex calls across a Bastionhost. The HTTP Proxy feature in Alibaba Cloud Toolkit isolates your business code from the environment without requiring you to make code changes. It simplifies the management of complex debugging requests and greatly improves testing efficiency.

• Switch between different proxy configurations with one click.

  Code in a staging environment often includes configurations to forward requests through a proxy. You must remove this configuration when you publish the product. If you have multiple staging environments, re-enabling the proxy for local testing can be tedious. The HTTP Proxy feature in Alibaba Cloud Toolkit saves your historical HTTP Proxy configurations, which you can reuse immediately. This greatly improves the reusability of staging environments and reduces resource costs.

• Integrate and use the proxy with ease.

  You do not need to install proxy tools such as Nginx or Charles. You can simply search for and embed the Alibaba Cloud Toolkit plugin in Visual Studio Code to debug your front-end and back-end components together.

How it works

The following graph shows how the HTTP Proxy works.

In the Visual Studio Code HTTP Proxy, you configure a port to accept requests, such as 18002, and a target server address for request forwarding, such as http://192.168.0.1:80.

An HTTP Proxy is configured between the client and the target server. Requests from clients, such as a browser or a local server, are first sent to the HTTP Proxy through the listening port, such as 18002. The HTTP Proxy then forwards the requests to the target server based on the configured target server path.

The target server listens for requests forwarded by the HTTP Proxy and then delivers or forwards them to the appropriate services.

Procedure

1. In the menu bar on the left of Visual Studio Code, click the Alibaba Cloud Toolkit icon and expand TOOLKIT > HTTP Proxy.
2. On the HTTP Proxy View tab, click Add Proxy.
3. On the Add Proxy page, set the parameters.
   1. On the Add Proxy tab, set the general configurations.
      • Name: The name of the HTTP Proxy configuration. For example, ACT system test.
      • Target Server: The target server to which requests are proxied. For example, Alibaba Cloud official website.
        Note HTTP and HTTPS protocols are supported.
      • (Optional) Header: The header content to add to the HTTP or HTTPS request.
      • (Optional) Parameter: The request parameters to add. Press Enter for a line break.
      • (Optional) Cookie: The cookie content to add.
   2. On the Advanced tab, set the advanced configurations, such as the listening port, agent server, and cross-domain access.
      • Listening Port: The access port for the local proxy that your code uses. The default port is 18002. If a port conflict occurs, you can change this parameter.
      • Optional: Agent Server: The IP address of the agent server.

        If the target server must be accessed using a domain name and you need to modify the hosts file for each access, set this parameter to the IP address that corresponds to the domain name.

      • (Optional) Access-Control-Allow-Origin: Controls cross-domain access. This feature is enabled by default. Enable this switch if your requests need to be forwarded across domains.
   3. Click OK.
4. On the HTTP Proxy View tab, find the proxy in the list and click the switch in the Actions column to enable the proxy feature.

   After you start the HTTP Proxy configuration, you can click Copy to easily obtain the proxy address for access.

   Note If you do not need to use the proxy configuration, turn off the HTTP Proxy switch. You can turn the switch back on when you need to use it again.

More information

• To modify the HTTP Proxy configuration, go to the HTTP Proxy View page. In the proxy list, click Properties in the Actions column and modify the settings as prompted.
• To delete an HTTP Proxy, go to the HTTP Proxy View page. In the proxy list, click Remove in the Actions column.