Condividi tramite


Esaminare le richieste API rilasciate dai servizi cloud

Integrando l'applicazione con i servizi cloud, una delle sfide che si potrebbe affrontare è comprendere come il servizio cloud interagisce con le API usate. La possibilità di esaminare le richieste API è particolarmente importante quando si risovono problemi o quando si tenta di comprendere il funzionamento del servizio cloud. In genere, è difficile, perché non si ha accesso al runtime del servizio cloud e si potrebbe anche non avere accesso agli strumenti di monitoraggio per l'API cloud. Usando Dev Proxy e i tunnel di sviluppo, è possibile esaminare le richieste API che i servizi cloud rilasciano alle API cloud.

Importante

Prima di continuare, installare i tunnel di sviluppo e configurare lo strumento per l'uso.

Come i servizi cloud chiamano le API cloud

Integrando l'applicazione con i servizi cloud, il servizio cloud chiama l'API nel cloud. Il diagramma seguente illustra questo scenario:

Diagramma che mostra come un servizio cloud chiama un'API cloud.

Per esaminare le richieste API che il servizio cloud rilascia, è necessario accedere agli strumenti di monitoraggio per l'API cloud. Spesso non si ha accesso a questi strumenti. È possibile ovviare a questa limitazione usando un ambiente di gestione temporanea. Tuttavia, richiede molto tempo per configurare e gestire un ambiente di gestione temporanea. Inoltre, se non si è proprietari dell'API cloud, potrebbe non essere possibile configurare un ambiente di gestione temporanea.

Esaminare le richieste API usando Dev Proxy e i tunnel di sviluppo

Usando Dev Proxy e i tunnel di sviluppo, è possibile esaminare le richieste API che il servizio cloud invia all'API cloud.

Diagramma che mostra come esaminare le chiamate API cloud usando i tunnel di sviluppo e Dev Proxy.

Anziché chiamare direttamente l'API cloud, configurare il servizio cloud per chiamare il tunnel di sviluppo eseguito nel computer locale (1). Si configura dev tunnel per l'uso di un'intestazione host intercetta da Dev Proxy. Ogni volta che il servizio cloud chiama il tunnel di sviluppo, passa la richiesta a Dev Proxy che lo intercetta (2). Usando Dev Proxy RewritePlugin, si modifica l'URL della richiesta intercettata e lo si inoltra all'API cloud (3). L'API cloud elabora la richiesta e restituisce una risposta a Dev Proxy (4). Dev Proxy passa la risposta al tunnel di sviluppo (5), che lo inoltra al servizio cloud (6). Poiché la richiesta viene instradata attraverso il computer locale, è possibile esaminarne le informazioni, inclusi URL, intestazioni e corpo e la risposta dell'API cloud.

Scenario

Si supponga di voler esaminare le richieste API che un servizio cloud rilascia all'API JSONPlaceholder demo disponibile in https://jsonplaceholder.typicode.com. Combinando Dev Proxy e i tunnel di sviluppo, è possibile intercettare le richieste ed esaminarne le informazioni.

È possibile esaminare le richieste usando gli strumenti di ispezione dei tunnel di sviluppo o tramite Dev Proxy DevToolsPlugin. Entrambi gli strumenti usano Chrome Dev Tools per visualizzare informazioni sulle richieste e le risposte intercettate. Quando si usano gli strumenti di ispezione dei tunnel di sviluppo, l'URL del tunnel di sviluppo viene visualizzato come URL della richiesta. In confronto, quando si usa Dev Proxy DevToolsPlugin, si noterà come Dev Proxy intercetta la richiesta, usando l'URL locale o riscritto.

Esaminare le richieste API usando Dev Proxy, tunnel di sviluppo e strumenti di ispezione dei tunnel di sviluppo

  1. Configurare Dev Proxy per intercettare le richieste a https://jsonplaceholder.typicode.com e 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
    }
    

    Il file di configurazione usa RewritePlugin per riscrivere l'URL delle richieste intercettate. Configura anche Dev Proxy per intercettare le richieste agli https://jsonplaceholder.typicode.com URL e http://jsonplaceholder.typicode.local .

    Nota

    Anche se non è necessario usare un .local dominio, è consigliabile distinguere tra le richieste reali e le richieste intercettate. Si noti anche che per il .local dominio si usa il protocollo HTTP anziché HTTPS. I tunnel di sviluppo non supportano HTTPS per il routing delle richieste alle intestazioni host personalizzate nel computer locale, motivo per cui è necessario usare HTTP.

  2. Creare un file di riscrittura denominato devproxy-rewrites.json che modifica l'URL delle richieste intercettate:

    {
      "rewrites": [
        {
          "in": {
            "url": "^http://jsonplaceholder.typicode.local(.*)"
          },
          "out": {
            "url": "https://jsonplaceholder.typicode.com$1"
          }
        }
      ]
    }
    

    Il file di riscrittura modifica l'URL delle richieste intercettate da http://jsonplaceholder.typicode.local a https://jsonplaceholder.typicode.com.

  3. Avviare Dev Proxy eseguendo nella riga devproxydi comando .

    Screenshot della riga di comando con Dev Proxy in esecuzione.

  4. Avviare il tunnel di sviluppo eseguendo nella riga devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymousdi comando .

    Screenshot della riga di comando che esegue Dev Proxy e dev tunnel.

    Usando questo comando, si apre un nuovo tunnel di sviluppo nel computer. Viene eseguito il mapping alla porta 8000, in cui Dev Proxy è in ascolto delle richieste in ingresso. È anche possibile specificare l'intestazione host intercettata dal proxy di sviluppo.

  5. Si noti l'URL del tunnel di sviluppo che è possibile usare per configurare il servizio cloud per chiamare il computer locale, ad esempio https://tunnel_id-8000.euw.devtunnels.ms.

  6. In un Web browser aprire l'URL di ispezione del tunnel di sviluppo, ad esempio https://tunnel_id-8000-inspect.euw.devtunnels.ms.

  7. Simulare un servizio cloud che chiama l'API cloud usando l'URL del tunnel di sviluppo, eseguendo nella riga di comando: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.

    Nota

    Si noti che il nome host corrisponde all'URL del tunnel di sviluppo nel computer. Il percorso corrisponde al percorso dell'API da esaminare.

    Screenshot della riga di comando che esegue Dev Proxy e un tunnel di sviluppo e curl che chiama il tunnel di sviluppo.

  8. Si noti che Dev Proxy intercetta la richiesta e la inoltra all'API cloud, restituendo infine la risposta al client.

  9. Nel Web browser si notino le informazioni sulla richiesta intercettata e sulla risposta dall'API cloud.

    Screenshot di un Web browser con strumenti di ispezione del tunnel di sviluppo che mostra la richiesta intercettata.

    Nota

    Si noti che l'URL della richiesta registrata è l'URL del tunnel di sviluppo. L'intestazione host registrata è l'intestazione host intercettata da Dev Proxy.

  10. Chiudere il tunnel di sviluppo e arrestare Dev Proxy premendo CTRL+C nelle rispettive sessioni nella riga di comando.

Esaminare le richieste API usando Dev Proxy e DevToolsPlugin

Un altro modo per esaminare le richieste API che il servizio cloud rilascia, consiste nell'usare Dev Proxy DevToolsPlugin. La differenza tra l'uso di DevToolsPlugin e gli strumenti di ispezione dei tunnel di sviluppo è che DevToolsPlugin mostra come Dev Proxy intercetta la richiesta, usando l'URL locale o riscritto.

Configurare Dev Proxy per l'uso di DevToolsPlugin per controllare le richieste API usando l'URL intercettato

Prima di tutto, configurare Dev Proxy per esaminare le richieste api cloud. Configurare DevToolsPlugin per visualizzare le informazioni sull'URL prima che il proxy di sviluppo lo riscriva.

  1. Aggiornare il file di configurazione di Dev Proxy per usare DevToolsPlugin:

    {
      "$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
    }
    

    Nota

    Si noti che si aggiunge DevToolsPlugin prima di RewritePlugin. Aggiungendo Prima di tutto DevToolsPlugin, vengono visualizzate le informazioni sulla richiesta intercettata prima che venga riscritta.

  2. Avviare Dev Proxy eseguendo nella riga devproxydi comando . Si noti che Dev Proxy apre una finestra del Web browser con Chrome Dev Tools visibile.

  3. Avviare il tunnel di sviluppo eseguendo nella riga devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymousdi comando .

  4. Simulare un servizio cloud che chiama l'API cloud usando l'URL del tunnel di sviluppo, eseguendo nella riga di comando: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.

  5. Nel Web browser con Chrome Dev Tools notare le informazioni sulla richiesta intercettata e sulla risposta dell'API cloud.

    Screenshot di un Web browser con gli strumenti di ispezione di Dev Proxy che mostra la richiesta intercettata.

    Nota

    Si noti che l'URL della richiesta registrata è l'URL dell'API cloud. L'intestazione host registrata è l'intestazione host intercettata da Dev Proxy.

  6. Chiudere il tunnel di sviluppo e arrestare Dev Proxy premendo CTRL+C nelle rispettive sessioni nella riga di comando.

Configurare Dev Proxy per l'uso di DevToolsPlugin per esaminare le richieste API usando l'URL riscritto

Aggiornare quindi la configurazione del proxy di sviluppo per visualizzare le informazioni sull'URL riscritto.

  1. Aggiornare il file di configurazione di Dev Proxy spostando DevToolsPlugin dopo RewritePlugin:

    {
      "$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
    }
    
  2. Avviare Dev Proxy eseguendo nella riga devproxydi comando . Si noti che Dev Proxy apre una finestra del Web browser con Chrome Dev Tools visibile.

  3. Avviare il tunnel di sviluppo eseguendo nella riga devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymousdi comando .

  4. Simulare un servizio cloud che chiama l'API cloud usando l'URL del tunnel di sviluppo, eseguendo nella riga di comando: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.

  5. Nel Web browser con Chrome Dev Tools notare le informazioni sulla richiesta intercettata e sulla risposta dell'API cloud.

    Screenshot di un Web browser con gli strumenti di ispezione di Dev Proxy che mostra la richiesta intercettata con GLI URL dell'API cloud.

    Nota

    Si noti che sia l'URL della richiesta registrata che l'intestazione host mostrano l'URL dell'API cloud.

  6. Chiudere il tunnel di sviluppo e arrestare Dev Proxy premendo CTRL+C nelle rispettive sessioni nella riga di comando.

Riepilogo

Usando Dev Proxy e i tunnel di sviluppo, è possibile esaminare le richieste API che i servizi cloud rilasciano alle API cloud. È possibile usare gli strumenti di ispezione dei tunnel di sviluppo o Dev Proxy DevToolsPlugin per controllare le richieste. Entrambi gli strumenti mostrano le informazioni sulle richieste intercettate, inclusi l'URL, le intestazioni e il corpo e la risposta dell'API cloud. Usando Dev Proxy e i tunnel di sviluppo, è possibile comprendere meglio il modo in cui i servizi cloud interagiscono con le API cloud e risolvere i problemi in modo più efficace.

Passaggi successivi

Altre informazioni su RewritePlugin.