L'affichage de Chercher de l'API de réponse dans la fenêtre du navigateur

0

La question

Je suis l'aide de l'Extraction de l'API pour interroger certains services web, car j'ai besoin d'ajouter manuellement X-Custom les en-têtes. Tous les exemples que j'ai trouvé en ce qui concerne l'affichage du résultat, utilisez console.log dans les DevTools fenêtre de la console.

Je n'ai pas le JavaScript d'expérience, mais c'était un moyen pour une fin, j'ai donc:

fetch('<url>', {
    headers: myHeaders,
    method: 'GET',
    credentials: 'include'
}).then(
    function(response) {
        response.json().then(function(data)) {
            console.log(data);
        });
    })

Ce n'afficher à la console, mais j'aimerais dans la fenêtre du navigateur, comme si j'avais simplement navigué <url> et la réponse a été affiché. N'JavaScript activer quelque chose comme:

fetch('<url>', {
        headers: myHeaders,
        method: 'GET',
        credentials: 'include'
    }).then(
        function(response) {
            response.json().then(function(data)) {
                this.browserWindow.display(data);
            });
        })

Comment aurais-je l'afficher dans la fenêtre du navigateur, comme si j'avais navigué à l'URL via la barre de recherche?

Mise à jour

J'ai donc réussi chargement de certains résultats de la manière suivante:

fetch('<url>', {
    headers: myHeaders,
    method: 'GET',
    credentials: 'include'
}).then(
    function(response) {
        response.text().then(function(data)) {
            document.querySelector('body').innerHTML = data
        });
    })

Et la réponse s'affiche pour l'inspection; c'est une réponse JSON alors j'espérais response.Json() mais il affiche juste [object Object]. Si je peux silhouette eout comment "assez d'affichage" le JSON, nous avons une solution.

fetch fetch-api google-chrome javascript
2021-11-22 17:50:43
1

La meilleure réponse

2

Vous avez surtout pensé à elle, mais si vous pouvez utiliser JSON.stringify pour obtenir de plus belle mise en forme. Pour les subtilités, j'ai enveloppé le résultat dans le code HTML <pre> tag, mais vous pouvez utiliser n'importe quel sens pour votre cas d'utilisation.

fetch('<url>', {
headers: myHeaders,
method: 'GET',
credentials: 'include'
}).then(
    function(response) {
        response.json().then(function(data)) {
            document.querySelector('body').innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`
        });
    })

Il y a une sécurité mise en garde d'être au courant de. Vous êtes en ajoutant une réponse directement vers les DOM sans nettoyer les résultats, ce qui peut conduire à des attaques XSS (https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html) Alors que ce code est vulnérable, il est probablement une menace mineure, compte tenu de votre cas d'utilisation.

Pour le code utilisé dans la production, il y a un certain nombre d'approches pour prévenir cette vulnérabilité, le plus commun étant d'échapper à toute chaîne de caractères que vous allez insérer dans le DOM. Une alternative est l'analyse des résultats et de la création d'éléments HTML que vous souhaitez insérer, puis à l'aide d'innerTEXT pour le contenu fourni à partir de l'API.

2021-11-23 17:10:39

Dans d'autres langues

Cette page est dans d'autres langues

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................