在浏览器 window 中显示 Fetch API 响应

Question

我正在使用 Fetch API 查询一些 Web 服务，因为我需要手动添加 X-Custom headers。我找到的关于显示结果的所有示例都使用 console.log 到 DevTools 控制台 window.

我没有 JavaScript 经验，但这是达到目的的手段，所以我有：

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

这确实会显示到控制台，但我希望在浏览器 window 中显示它，就好像我只是导航到 <url> 并显示响应一样。 JavaScript 是否启用类似：

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

如何在浏览器 window 中显示它，就像我通过搜索栏导航到 URL 一样？

更新

所以我已经成功加载了一些结果：

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

并出现响应以供检查；这是一个 JSON 响应，所以我希望 response.Json() 会起作用，但它只显示 [object Object]。如果我能弄清楚如何“漂亮地显示”JSON，我们就有解决方案。

Answer 1

你已经基本弄明白了，但如果你可以使用 JSON.stringify 来获得更好的格式。为了细节，我将结果包装在 HTML <pre> 标记中，但您可以使用对您的用例有意义的任何内容。

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>`
        });
    })

需要注意一个安全警告。您直接向 DOM 添加响应而不对结果进行清理，这可能导致 XSS 攻击 (https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html) 虽然此代码易受攻击，但考虑到您的用例，它可能是一个小威胁。

对于生产中使用的代码，有多种方法可以防止此漏洞，最常见的方法是转义要插入到 DOM 中的任何字符串。另一种方法是解析结果，并创建要插入的 HTML 元素，然后将 innerTEXT 用于 API.

提供的内容

在浏览器 window 中显示 Fetch API 响应

Displaying Fetch API response in browser window

javascript

google-chrome

fetch

fetch-api