API-aanvragen inspecteren die zijn uitgegeven door cloudservices

Artikel
02/05/2025

Wanneer u uw toepassing integreert met cloudservices, is een van de uitdagingen waarmee u te maken krijgt, inzicht in hoe de cloudservice communiceert met de API's die worden gebruikt. Het controleren van API-aanvragen is vooral belangrijk wanneer u problemen wilt oplossen of wanneer u probeert te begrijpen hoe de cloudservice werkt. Normaal gesproken is het lastig, omdat u geen toegang hebt tot de runtime van de cloudservice en u ook geen toegang hebt tot de bewakingsprogramma's voor de cloud-API. Met behulp van Dev Proxy en dev tunnels kunt u de API-aanvragen inspecteren die cloudservices uitgeven aan cloud-API's.

Belangrijk

Voordat u doorgaat, installeert u dev tunnels en configureert u het hulpprogramma voor gebruik.

Hoe cloudservices cloud-API's aanroepen

Wanneer u uw toepassing integreert met cloudservices, roept de cloudservice uw API aan in de cloud. In het volgende diagram ziet u dit scenario:

Als u API-aanvragen wilt inspecteren die de cloudservice ondervindt, hebt u toegang nodig tot de bewakingsprogramma's voor de cloud-API. Vaak hebt u geen toegang tot deze hulpprogramma's. U kunt deze beperking omzeilen door een faseringsomgeving te gebruiken. Het is echter tijdrovend om een faseringsomgeving in te stellen en te onderhouden. Wat meer is, als u niet de eigenaar bent van de cloud-API, kunt u mogelijk helemaal geen faseringsomgeving instellen.

API-aanvragen inspecteren met behulp van Dev Proxy en dev-tunnels

Met behulp van Dev Proxy en dev-tunnels kunt u de API-aanvragen inspecteren die de cloudservice naar de cloud-API verzendt.

In plaats van de cloud-API rechtstreeks aan te roepen, configureert u de cloudservice om de dev-tunnel aan te roepen die u uitvoert op uw lokale computer (1). U configureert Dev Tunnel voor het gebruik van een host-header die Dev Proxy onderschept. Telkens wanneer de cloudservice de dev-tunnel aanroept, wordt de aanvraag doorgegeven aan de Dev-proxy die deze onderschept (2). Met behulp van de Dev Proxy RewritePlugin wijzigt u de URL van de onderschepte aanvraag en stuurt u deze door naar de cloud-API (3). De cloud-API verwerkt de aanvraag en retourneert een reactie op Dev Proxy (4). Dev Proxy geeft het antwoord door aan dev tunnel (5), die deze doorstuurt naar de cloudservice (6). Omdat de aanvraag wordt gerouteerd via uw lokale computer, kunt u de gegevens controleren, inclusief URL, headers en hoofdtekst en het antwoord van de cloud-API.

Scenario

Stel dat u API-verzoeken wilt inspecteren die een cloudservice doet naar de demo-JSONPlaceholder-API op https://jsonplaceholder.typicode.com. Door Dev Proxy- en dev-tunnels te combineren, kunt u de aanvragen onderscheppen en hun gegevens inspecteren.

U kunt de aanvragen inspecteren met behulp van inspectiehulpprogramma's voor Dev Tunnels of met de Dev Proxy DevToolsPlugin. Beide hulpprogramma's gebruiken Chrome Dev Tools om informatie weer te geven over onderschepte aanvragen en antwoorden. Wanneer u de hulpprogramma's voor het inspecteren van dev tunnels gebruikt, ziet u de URL van de dev-tunnel als de aanvraag-URL. Ter vergelijking: wanneer u dev proxy DevToolsPlugin gebruikt, ziet u hoe dev proxy de aanvraag onderschept met behulp van de lokale of de herschreven URL.

API-aanvragen inspecteren met dev proxy, dev tunnels en dev tunnels inspectiehulpprogramma's

Dev Proxy configureren voor het onderscheppen van aanvragen naar https://jsonplaceholder.typicode.com en http://jsonplaceholder.typicode.local:
```
{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.24.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
}
```
Het configuratiebestand gebruikt rewritePlugin om de URL van de onderschepte aanvragen opnieuw te schrijven. Het configureert ook Dev Proxy om verzoeken naar https://jsonplaceholder.typicode.com en http://jsonplaceholder.typicode.local URL's te onderscheppen.

Notitie

Hoewel het niet nodig is om een .local domein te gebruiken, is het een goede gewoonte om onderscheid te maken tussen de werkelijke en de onderschepte aanvragen. U ziet ook dat u voor het .local domein het HTTP-protocol gebruikt in plaats van HTTPS. Dev-tunnels bieden geen ondersteuning voor HTTPS voor routeringsaanvragen naar aangepaste hostheaders op uw lokale computer. Daarom moet u HTTP gebruiken.
Maak een herschrijfbestand met de naam devproxy-rewrites.json waarmee de URL van de onderschepte aanvragen wordt gewijzigd:
```
{
  "rewrites": [
    {
      "in": {
        "url": "^http://jsonplaceholder.typicode.local(.*)"
      },
      "out": {
        "url": "https://jsonplaceholder.typicode.com$1"
      }
    }
  ]
}
```
Het herschrijfbestand wijzigt de URL van de onderschepte aanvragen van http://jsonplaceholder.typicode.local in https://jsonplaceholder.typicode.com.
Start Dev Proxy door het uit te voeren in de opdrachtregel devproxy.
Start de dev-tunnel door deze uit te voeren op de opdrachtregel devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymous.

Met deze opdracht opent u een nieuwe dev-tunnel op uw computer. U wijst deze toe aan de 8000-poort, waar Dev Proxy luistert naar binnenkomende aanvragen. U geeft ook de hostheader op die Dev Proxy onderschept.
Noteer de URL van de dev-tunnel die u kunt gebruiken om de cloudservice te configureren om uw lokale computer aan te roepen, bijvoorbeeld https://tunnel_id-8000.euw.devtunnels.ms.
Open in een webbrowser bijvoorbeeld de URL https://tunnel_id-8000-inspect.euw.devtunnels.msvoor de inspectie van de dev-tunnel.
Simuleer een cloudservice die de cloud-API aanroept met behulp van de URL van de dev-tunnel door deze uit te voeren op de opdrachtregel: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.

Notitie

U ziet dat de hostnaam overeenkomt met de URL van de dev-tunnel op uw computer. Het pad komt overeen met het pad van de API die u wilt inspecteren.
U ziet hoe Dev Proxy de aanvraag onderschept en doorstuurt naar de cloud-API, waarna het antwoord uiteindelijk wordt geretourneerd naar de client.
In de webbrowser ziet u de informatie over de onderschepte aanvraag en het antwoord van de cloud-API.

Notitie

U ziet dat de vastgelegde aanvraag-URL de URL van de dev-tunnel is. De opgenomen host-header is de host-header die Dev Proxy onderschept.
Sluit de dev-tunnel en stop Dev Proxy door op Ctrl+C te drukken in hun respectieve sessies op de commandoregel.

API-aanvragen inspecteren met behulp van Dev Proxy en DevToolsPlugin

Een andere manier om de API-aanvragen te inspecteren die door de cloudservice worden veroorzaakt, is door de Dev Proxy DevToolsPlugin te gebruiken. Het verschil tussen het gebruik van devToolsPlugin en de inspectiehulpprogramma's voor dev tunnels is dat devToolsPlugin laat zien hoe Dev Proxy de aanvraag onderschept met behulp van de lokale of de herschreven URL.

Dev Proxy configureren om DevToolsPlugin te gebruiken om API-aanvragen te inspecteren met behulp van de onderschepte URL

Eerst gaan we Dev Proxy configureren om cloud-API-aanvragen te inspecteren. Laten we devToolsPlugin configureren om de informatie over de URL weer te geven voordat de Dev Proxy deze herschrijft.

Werk het configuratiebestand voor de Dev Proxy bij om devToolsPlugin te gebruiken:

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.24.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
}

Notitie

U ziet dat we de DevToolsPlugin voor de RewritePlugin toevoegen. Door eerst de DevToolsPlugin toe te voegen, ziet u de informatie over de onderschepte aanvraag voordat deze opnieuw wordt geschreven.

Start Dev Proxy door het commando op de opdrachtregel uit te voeren devproxy. U ziet dat Dev Proxy een webbrowservenster opent met Chrome Dev Tools zichtbaar.
Start de dev-tunnel door deze uit te voeren op de opdrachtregel devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymous.
Simuleer een cloudservice die de cloud-API aanroept met behulp van de URL van de dev-tunnel door deze uit te voeren op de opdrachtregel: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.
In de webbrowser met Chrome Dev Tools ziet u de informatie over de onderschepte aanvraag en het antwoord van de cloud-API.

Notitie

U ziet dat de vastgelegde aanvraag-URL de URL van de cloud-API is. De opgenomen hostheader is de hostheader die Dev Proxy onderschept.
Sluit de dev-tunnel en stop Dev Proxy door in de respectieve sessies van de opdrachtregel op Ctrl+C te drukken.

Dev Proxy configureren om devToolsPlugin te gebruiken om API-aanvragen te inspecteren met behulp van de herschreven URL

Vervolgens gaan we de dev-proxyconfiguratie bijwerken om de informatie over de herschreven URL weer te geven.

Werk het configuratiebestand van de Dev Proxy bij door devToolsPlugin na de RewritePlugin te verplaatsen:

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.24.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
}

Start Dev Proxy door Dev Proxy uit te voeren in de opdrachtprompt devproxy. U ziet dat Dev Proxy een webbrowservenster opent met Chrome Dev Tools zichtbaar.
Start de ontwikkeltunnel door het commando uit te voeren op de commandoregel devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymous.
Simuleer een cloudservice die de cloud-API aanroept met behulp van de URL van de dev-tunnel door deze uit te voeren op de opdrachtregel: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.
In de webbrowser met Chrome Dev Tools ziet u de informatie over de onderschepte aanvraag en het antwoord van de cloud-API.

Notitie

U ziet dat zowel de geregistreerde aanvraag-URL als de hostheader de URL van de cloud-API weergeeft.
Sluit de dev-tunnel en stop Dev Proxy door op Ctrl+C te drukken in hun respectieve sessies op de opdrachtregel.

Samenvatting

Met behulp van Dev Proxy en dev tunnels kunt u de API-aanvragen inspecteren die cloudservices uitgeven aan cloud-API's. U kunt dev tunnels inspectiehulpprogramma's of de Dev Proxy DevToolsPlugin gebruiken om de aanvragen te inspecteren. Beide hulpprogramma's tonen u de informatie over de onderschepte aanvragen, waaronder de URL, headers en hoofdtekst en het antwoord van de cloud-API. Door dev-proxy- en dev-tunnels te gebruiken, kunt u beter begrijpen hoe cloudservices communiceren met cloud-API's en problemen effectiever oplossen.

Volgende stappen

Meer informatie over de RewritePlugin.

RewritePlugin

Delen via