Inspecter les demandes d’API émises par les services cloud

Lorsque vous intégrez votre application à des services cloud, l’une des difficultés auxquelles vous pouvez être confronté est de comprendre comment le service cloud interagit avec les API qu’il utilise. L’inspection des demandes d’API est particulièrement importante lorsque vous résolvez des problèmes ou lorsque vous essayez de comprendre le fonctionnement du service cloud. Généralement, la tâche est ardue, car vous n’avez pas accès au runtime du service cloud, et vous n’avez peut-être pas également accès aux outils de surveillance pour l’API cloud. À l’aide de Dev Proxy et de tunnels Dev, vous pouvez inspecter les demandes d’API que les services cloud émettent aux API cloud.

Important

Avant de continuer, installez des tunnels dev et configurez l’outil à utiliser.

Comment les services cloud appellent des API cloud

Lorsque vous intégrez votre application à des services cloud, le service cloud appelle votre API dans le cloud. Le diagramme suivant illustre ce scénario :

Pour inspecter les demandes d’API émises par le service cloud, vous devez accéder aux outils de surveillance de l’API cloud. Souvent, vous n’avez pas accès à ces outils. Vous pouvez contourner cette limitation en utilisant un environnement intermédiaire. Toutefois, il est fastidieux de configurer et de gérer un environnement intermédiaire. De plus, si vous ne possédez pas l’API cloud, il se peut que vous ne puissiez pas du tout configurer un environnement intermédiaire.

Inspecter les demandes d’API à l’aide du Dev Proxy et des tunnels dev

À l’aide du proxy Dev et des tunnels dev, vous pouvez inspecter les demandes d’API émises par le service cloud auprès de l’API cloud.

Au lieu d’appeler directement l’API cloud, vous configurez le service cloud pour appeler le tunnel dev que vous exécutez sur votre ordinateur local (1). Vous configurez le tunnel de développement pour qu’il utilise un en-tête d’hôte que le proxy de développement intercepte. Chaque fois que le service cloud appelle le tunnel dev, il transmet la requête au proxy Dev qui l’intercepte (2). À l’aide du proxy Dev RewritePlugin, vous modifiez l’URL de la requête interceptée et transférez-la à l’API cloud (3). L’API cloud traite la requête et retourne une réponse au proxy Dev (4). Le proxy Dev transmet la réponse au tunnel dev (5), qui le transfère au service cloud (6). Étant donné que la requête est acheminée via votre ordinateur local, vous pouvez inspecter ses informations, notamment l’URL, les en-têtes et le corps, ainsi que la réponse de l’API cloud.

Scénario

Supposons que vous souhaitez inspecter les demandes d’API qu’un service cloud émet à l’API JSONPlaceholder de la version de démonstration située à l’adresse https://jsonplaceholder.typicode.com. La combinaison de Proxy Dev et des tunnels dev permet d’intercepter les demandes et d’inspecter les informations qu’elles contiennent.

Vous pouvez inspecter les demandes à l’aide d’outils d’inspection de tunnels dev ou à l’aide de Dev Proxy DevToolsPlugin. Les deux outils utilisent Chrome Dev Tools pour afficher des informations sur les demandes et réponses interceptées. Lorsque vous utilisez les outils d’inspection des tunnels dev, vous voyez l’URL du tunnel dev comme URL de requête. En revanche, lorsque vous utilisez le Dev Proxy DevToolsPlugin, vous découvrez comment le Dev Proxy intercepte la requête, à l’aide de l’URL locale ou de l’URL réécrite.

Inspecter les demandes d’API à l’aide du Dev Proxy, des tunnels dev et des outils d’inspection des tunnels de développement

Configurer le Dev Proxy pour intercepter les demandes vers https://jsonplaceholder.typicode.com et http://jsonplaceholder.typicode.local :
```
{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v1.0.0/rc.schema.json",
  "plugins": [
    {
      "name": "RewritePlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
      "configSection": "rewritePlugin"
    }
  ],
  "urlsToWatch": [
    "https://jsonplaceholder.typicode.com/*",
    "http://jsonplaceholder.typicode.local/*"
  ],
  "rewritePlugin": {
    "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v1.0.0/rewriteplugin.schema.json",
    "rewritesFile": "devproxy-rewrites.json"
  },
  "logLevel": "information",
  "newVersionNotification": "stable",
  "showSkipMessages": true
}
```
Le fichier de configuration utilise le RewritePlugin pour réécrire l’URL des demandes interceptées. Il configure également Dev Proxy pour intercepter les demandes vers les URL https://jsonplaceholder.typicode.com et http://jsonplaceholder.typicode.local.

Remarque

Certes, il n’est pas nécessaire d’utiliser un domaine .local, mais c’est une bonne pratique qui permet de faire la distinction entre les demandes réelles et celles qui ont été interceptées. Notez également que pour le domaine .local, vous utilisez le protocole HTTP plutôt que HTTPS. Les tunnels dev ne prennent pas en charge HTTPS pour l’ acheminement des demandes vers des en-têtes d’hôte personnalisés sur votre ordinateur local, c’est pourquoi vous devez utiliser HTTP.

Créez un fichier de réécriture nommé devproxy-rewrites.json qui modifie l’URL des demandes interceptées :

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v1.0.0/rewriteplugin.rewritesfile.schema.json",
  "rewrites": [
    {
      "in": {
        "url": "^http://jsonplaceholder.typicode.local(.*)"
      },
      "out": {
        "url": "https://jsonplaceholder.typicode.com$1"
      }
    }
  ]
}

Le fichier de réécriture modifie l’URL des requêtes interceptées qui passe de http://jsonplaceholder.typicode.local à https://jsonplaceholder.typicode.com.

Démarrez Dev Proxy en exécutant la ligne de commande devproxy.
Démarrez le tunnel dev en exécutant la ligne de commande devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymous.

À l’aide de cette commande, vous ouvrez un nouveau tunnel dev sur votre machine. Vous le mappez au port 8000 qui est l’endroit où Dev Proxy écoute les demandes entrantes. Vous spécifiez également l’en-tête d’hôte que le proxy de développement intercepte.
Notez l’URL du tunnel dev que vous pouvez utiliser pour configurer le service cloud pour appeler votre ordinateur local, par exemple https://tunnel_id-8000.euw.devtunnels.ms.
Dans un navigateur web, ouvrez l’URL d’inspection du tunnel dev, par exemple https://tunnel_id-8000-inspect.euw.devtunnels.ms.
Simulez un service cloud appelant l’API cloud en utilisant l’URL du tunnel dev, en l’exécutant dans la ligne de commande : curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.

Remarque

Notez que le nom d’hôte correspond à l’URL du tunnel dev sur votre machine. Le chemin d’accès correspond au chemin d’accès de l’API à inspecter.
Notez que Dev Proxy intercepte la requête et la transmet à l’API cloud, puis renvoie la réponse au client.
Dans le navigateur web, notez les informations concernant la requête interceptée et la réponse de l’API cloud.

Remarque

Notez que l’URL de la requête enregistrée est l’URL du tunnel dev. L’en-tête d’hôte enregistré est l’en-tête d’hôte que le proxy de développement intercepte.
Fermez le tunnel dev et arrêtez Dev Proxy en appuyant sur Ctrl+C dans leurs sessions respectives dans la ligne de commande.

Inspecter les demandes d’API à l’aide du Dev Proxy et devToolsPlugin

Une autre façon d’inspecter les demandes d’API que le service cloud rencontre, consiste à utiliser Dev Dev ProxyToolsPlugin. La différence entre l’utilisation de DevToolsPlugin et les outils d’inspection des tunnels de développement est que DevToolsPlugin montre comment le Dev Proxy intercepte la requête, à l’aide de l’URL locale ou réécrite.

Configurer le Proxy pour utiliser DevToolsPlugin pour inspecter les demandes d’API à l’aide de l’URL interceptée

Tout d’abord, nous allons configurer le Dev Proxy pour inspecter les demandes d’API cloud. Configurons DevToolsPlugin pour qu’il affiche les informations sur l’URL avant que Dev Proxy ne la réécrive.

Mettez à jour le fichier de configuration du Dev Proxy pour utiliser le DevToolsPlugin :

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

Remarque

Notez que nous ajoutons le DevToolsPlugin avant le RewritePlugin. En ajoutant d’abord le DevToolsPlugin, il affiche les informations sur la requête interceptée avant sa réécriture.

Démarrez Dev Proxy en exécutant la ligne de commande devproxy. Notez que Dev Proxy ouvre une fenêtre du navigateur web dans laquelle les outils Chrome Dev Tools sont visibles.
Démarrez le tunnel dev en exécutant la ligne de commande devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymous.
Simulez un service cloud appelant l’API cloud en utilisant l’URL du tunnel dev, en l’exécutant dans la ligne de commande : curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.
Dans le navigateur web avec Chrome Dev Tools, notez les informations sur la requête interceptée et la réponse de l’API cloud.

Remarque

Notez que l’URL de la requête enregistrée est l’URL de l’API cloud. L’en-tête d’hôte enregistré est l’en-tête d’hôte que le proxy de développement intercepte.
Fermez le tunnel dev et arrêtez Dev Proxy en appuyant sur Ctrl+C dans leurs sessions respectives dans la ligne de commande.

Configurez Dev Proxy pour qu’il utilise DevToolsPlugin afin d’inspecter les demandes d’API à l’aide de l’URL réécrite.

Ensuite, mettons à jour la configuration de Dev Proxy pour afficher les informations sur l’URL réécrite.

Mettez à jour le fichier de configuration du Dev Proxy en déplaçant le DevToolsPlugin juste après le RewritePlugin :

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

Démarrez Dev Proxy en exécutant la ligne de commande devproxy. Notez que Dev Proxy ouvre une fenêtre du navigateur web dans laquelle les outils Chrome Dev Tools sont visibles.
Démarrez le tunnel dev en exécutant la ligne de commande devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymous.
Simulez un service cloud appelant l’API cloud en utilisant l’URL du tunnel dev, en l’exécutant dans la ligne de commande : curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.
Dans le navigateur web avec Chrome Dev Tools, notez les informations sur la requête interceptée et la réponse de l’API cloud.

Remarque

Notez que l’URL de la requête enregistrée et l’en-tête de l’hôte indiquent l’URL de l’API cloud.
Fermez le tunnel dev et arrêtez Dev Proxy en appuyant sur Ctrl+C dans leurs sessions respectives dans la ligne de commande.

Résumé

À l’aide de Dev Proxy et de tunnels Dev, vous pouvez inspecter les demandes d’API que les services cloud émettent aux API cloud. Vous pouvez utiliser les outils d’inspection des tunnels de développement ou Dev Proxy DevToolsPlugin pour inspecter les demandes. Ces deux outils affichent des informations sur les demandes interceptées, notamment l’URL, les en-têtes et le corps du message, ainsi que la réponse de l’API cloud. Grâce à Dev Proxy et aux tunnels Dev, vous pouvez mieux comprendre comment les services cloud interagissent avec les API cloud et résoudre les problèmes plus efficacement.

Étapes suivantes

Plus d’informations sur le RewritePlugin.

RewritePlugin

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-07-23