Inspección de las solicitudes de API emitidas por los servicios en la nube

Artículo
11/19/2024

Al integrar la aplicación con servicios en la nube, uno de los desafíos que podría enfrentar es comprender cómo interactúa el servicio en la nube con las API que usa. La capacidad de inspeccionar las solicitudes de API es especialmente importante cuando se solucionan problemas o cuando se intenta comprender cómo funciona el servicio en la nube. Normalmente, es difícil, ya que no tiene acceso al entorno de ejecución del servicio en la nube y es posible que tampoco tenga acceso a las herramientas de supervisión de la API en la nube. Mediante el proxy de desarrollo y tuneles dev, puede inspeccionar las solicitudes de API que emiten los servicios en la nube a las API en la nube.

Importante

Antes de continuar, instale tuneles dev y configure la herramienta para su uso.

Cómo los servicios en la nube llaman a las API en la nube

Al integrar la aplicación con servicios en la nube, el servicio en la nube llama a la API en la nube. En el siguiente diagrama, se ilustra este escenario:

Para inspeccionar las solicitudes de API que emite el servicio en la nube, necesita acceso a las herramientas de supervisión de la API en la nube. A menudo, no tiene acceso a estas herramientas. Puede solucionar esta limitación mediante el uso de un entorno de ensayo. Sin embargo, es lento configurar y mantener un entorno de ensayo. Además, si no posee la API en la nube, es posible que no pueda configurar un entorno de ensayo en absoluto.

Inspección de solicitudes de API mediante proxy de desarrollo y tuneles dev

Mediante el proxy de desarrollo y tuneles dev, puede inspeccionar las solicitudes de API que emite el servicio en la nube a la API en la nube.

En lugar de llamar directamente a la API en la nube, configure el servicio en la nube para llamar al túnel de desarrollo que ejecute en el equipo local (1). Configure el túnel de desarrollo para usar un encabezado de host que intercepta el proxy de desarrollo. Cada vez que el servicio en la nube llama al túnel de desarrollo, pasa la solicitud al proxy de desarrollo que lo intercepta (2). Con Dev Proxy RewritePlugin, cambia la dirección URL de la solicitud interceptada y la reenvía a la API en la nube (3). La API en la nube procesa la solicitud y devuelve una respuesta al proxy de desarrollo (4). El proxy de desarrollo pasa la respuesta al túnel de desarrollo (5), que lo reenvía al servicio en la nube (6). Dado que la solicitud se enruta a través de la máquina local, puede inspeccionar su información, incluida la dirección URL, los encabezados y el cuerpo, y la respuesta de la API en la nube.

Escenario

Supongamos que desea inspeccionar las solicitudes de API que emite un servicio en la nube a la API JSONPlaceholder de demostración que se encuentra en https://jsonplaceholder.typicode.com. Al combinar dev Proxy y tuneles dev, puede interceptar las solicitudes e inspeccionar su información.

Puede inspeccionar las solicitudes mediante tuneles dev herramientas de inspección o mediante dev Proxy DevToolsPlugin. Ambas herramientas usan Chrome Dev Tools para mostrar información sobre las solicitudes y respuestas interceptadas. Al usar las herramientas de inspección de tuneles dev, verá la dirección URL del túnel de desarrollo como la dirección URL de solicitud. En comparación, al usar dev Proxy DevToolsPlugin, verá cómo Dev Proxy intercepta la solicitud, mediante la dirección URL local o reescrita.

Inspección de solicitudes de API mediante el proxy de desarrollo, los tuneles dev y las herramientas de inspección de tuneles dev

Configure el proxy de desarrollo para interceptar las solicitudes a https://jsonplaceholder.typicode.com y http://jsonplaceholder.typicode.local:
```
{
  "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.23.0/rc.schema.json",
  "plugins": [
    {
      "name": "RewritePlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
      "configSection": "rewritePlugin"
    }
  ],
  "urlsToWatch": [
    "https://jsonplaceholder.typicode.com/*",
    "http://jsonplaceholder.typicode.local/*"
  ],
  "rewritePlugin": {
    "rewritesFile": "devproxy-rewrites.json"
  },
  "logLevel": "information",
  "newVersionNotification": "stable",
  "showSkipMessages": true
}
```
El archivo de configuración usa RewritePlugin para volver a escribir la dirección URL de las solicitudes interceptadas. También configura el proxy de desarrollo para interceptar las solicitudes a https://jsonplaceholder.typicode.com las direcciones URL y http://jsonplaceholder.typicode.local .

Nota:

Aunque no es necesario usar un .local dominio, se recomienda distinguir entre las solicitudes reales y interceptadas. Tenga en cuenta también que, para el .local dominio, se usa el protocolo HTTP, en lugar de HTTPS. Los túneles de desarrollo no admiten HTTPS para enrutar solicitudes a encabezados de host personalizados en la máquina local, por lo que es necesario usar HTTP.
Cree un archivo de reescritura denominado devproxy-rewrites.json que cambie la dirección URL de las solicitudes interceptadas:
```
{
  "rewrites": [
    {
      "in": {
        "url": "^http://jsonplaceholder.typicode.local(.*)"
      },
      "out": {
        "url": "https://jsonplaceholder.typicode.com$1"
      }
    }
  ]
}
```
El archivo de reescritura cambia la dirección URL de las solicitudes interceptadas de http://jsonplaceholder.typicode.local a https://jsonplaceholder.typicode.com.
Inicie el proxy de desarrollo mediante la ejecución en la línea devproxyde comandos .
Inicie el túnel de desarrollo ejecutando en la línea devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymousde comandos .

Con este comando, se abre un nuevo túnel de desarrollo en la máquina. Se asigna al puerto 8000, donde el proxy de desarrollo escucha las solicitudes entrantes. También se especifica el encabezado de host que intercepta el proxy de desarrollo.
Tenga en cuenta la dirección URL del túnel de desarrollo que puede usar para configurar el servicio en la nube para llamar a la máquina local, por ejemplo https://tunnel_id-8000.euw.devtunnels.ms.
En un explorador web, abra la dirección URL de inspección del túnel de desarrollo, por ejemplo https://tunnel_id-8000-inspect.euw.devtunnels.ms.
Simulación de un servicio en la nube que llama a la API en la nube mediante la dirección URL del túnel de desarrollo, mediante la ejecución en la línea de comandos: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.

Nota:

Observe que el nombre de host corresponde a la dirección URL del túnel de desarrollo en la máquina. La ruta de acceso coincide con la ruta de acceso de la API que desea inspeccionar.
Observe cómo dev Proxy intercepta la solicitud y la reenvía a la API en la nube y, finalmente, devuelve la respuesta al cliente.
En el explorador web, observe la información sobre la solicitud interceptada y la respuesta de la API en la nube.

Nota:

Observe que la dirección URL de solicitud grabada es la dirección URL del túnel de desarrollo. El encabezado de host registrado es el encabezado de host que intercepta el proxy de desarrollo.
Cierre el túnel de desarrollo y detenga el proxy de desarrollo presionando Ctrl+C en sus respectivas sesiones en la línea de comandos.

Inspección de solicitudes de API mediante el proxy de desarrollo y DevToolsPlugin

Otra manera de inspeccionar las solicitudes de API que emite el servicio en la nube es mediante dev Proxy DevToolsPlugin. La diferencia entre usar DevToolsPlugin y las herramientas de inspección de tuneles dev es que DevToolsPlugin muestra cómo Dev Proxy intercepta la solicitud mediante la dirección URL local o reescrita.

Configuración del proxy de desarrollo para usar DevToolsPlugin para inspeccionar las solicitudes de API mediante la dirección URL interceptada

En primer lugar, vamos a configurar dev Proxy para inspeccionar las solicitudes de API en la nube. Vamos a configurar DevToolsPlugin para mostrar la información sobre la dirección URL antes de que el proxy de desarrollo vuelva a escribirla.

Actualice el archivo de configuración del proxy de desarrollo para usar DevToolsPlugin:

{
  "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.23.0/rc.schema.json",
  "plugins": [
    {
      "name": "DevToolsPlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll"
    },
    {
      "name": "RewritePlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
      "configSection": "rewritePlugin"
    }
  ],
  "urlsToWatch": [
    "https://jsonplaceholder.typicode.com/*",
    "http://jsonplaceholder.typicode.local/*"
  ],
  "rewritePlugin": {
    "rewritesFile": "devproxy-rewrites.json"
  },
  "logLevel": "information",
  "newVersionNotification": "stable",
  "showSkipMessages": true
}

Nota:

Observe que agregamos DevToolsPlugin antes de RewritePlugin. Al agregar primero DevToolsPlugin, muestra la información sobre la solicitud interceptada antes de que se vuelva a escribir.

Inicie el proxy de desarrollo mediante la ejecución en la línea devproxyde comandos . Observe que dev Proxy abre una ventana del explorador web con las herramientas de desarrollo de Chrome visibles.
Inicie el túnel de desarrollo ejecutando en la línea devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymousde comandos .
Simulación de un servicio en la nube que llama a la API en la nube mediante la dirección URL del túnel de desarrollo, mediante la ejecución en la línea de comandos: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.
En el explorador web con Chrome Dev Tools, observe la información sobre la solicitud interceptada y la respuesta de la API en la nube.

Nota:

Observe que la dirección URL de solicitud grabada es la dirección URL de la API en la nube. El encabezado de host registrado es el encabezado de host que intercepta el proxy de desarrollo.
Cierre el túnel de desarrollo y detenga el proxy de desarrollo presionando Ctrl+C en sus respectivas sesiones en la línea de comandos.

Configuración del proxy de desarrollo para usar DevToolsPlugin para inspeccionar las solicitudes de API mediante la dirección URL reescrita

A continuación, vamos a actualizar la configuración del proxy de desarrollo para mostrar la información sobre la dirección URL reescrita.

Actualice el archivo de configuración del proxy de desarrollo moviendo DevToolsPlugin después de RewritePlugin:

{
  "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.23.0/rc.schema.json",
  "plugins": [
    {
      "name": "RewritePlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
      "configSection": "rewritePlugin"
    },
    {
      "name": "DevToolsPlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll"
    }
  ],
  "urlsToWatch": [
    "https://jsonplaceholder.typicode.com/*",
    "http://jsonplaceholder.typicode.local/*"
  ],
  "rewritePlugin": {
    "rewritesFile": "devproxy-rewrites.json"
  },
  "logLevel": "information",
  "newVersionNotification": "stable",
  "showSkipMessages": true
}

Inicie el proxy de desarrollo mediante la ejecución en la línea devproxyde comandos . Observe que dev Proxy abre una ventana del explorador web con las herramientas de desarrollo de Chrome visibles.
Inicie el túnel de desarrollo ejecutando en la línea devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymousde comandos .
Simulación de un servicio en la nube que llama a la API en la nube mediante la dirección URL del túnel de desarrollo, mediante la ejecución en la línea de comandos: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.
En el explorador web con Chrome Dev Tools, observe la información sobre la solicitud interceptada y la respuesta de la API en la nube.

Nota:

Observe que tanto la dirección URL de solicitud registrada como el encabezado del host muestran la dirección URL de la API en la nube.
Cierre el túnel de desarrollo y detenga el proxy de desarrollo presionando Ctrl+C en sus respectivas sesiones en la línea de comandos.

Resumen

Mediante el proxy de desarrollo y tuneles dev, puede inspeccionar las solicitudes de API que emiten los servicios en la nube a las API en la nube. Puede usar tuneles dev herramientas de inspección o el proxy de desarrollo DevToolsPlugin para inspeccionar las solicitudes. Ambas herramientas muestran la información sobre las solicitudes interceptadas, incluida la dirección URL, los encabezados y el cuerpo, y la respuesta de la API en la nube. Mediante el uso de Dev Proxy y tuneles dev, puede comprender mejor cómo interactúan los servicios en la nube con las API en la nube y solucionar problemas de forma más eficaz.

Pasos siguientes

Obtenga más información sobre RewritePlugin.

RewritePlugin

Compartir a través de