我使用 Fetch API 來查詢一些 Web 服務，因為我需要手動添加X-Custom標頭。我發現的所有關于console.log在 DevTools 控制臺視窗中顯示結果的示例。
我沒有 JavaScript 經驗，但這是達到目的的一種手段，所以我有：
fetch('<url>', {
headers: myHeaders,
method: 'GET',
credentials: 'include'
}).then(
function(response) {
response.json().then(function(data)) {
console.log(data);
});
})
這確實顯示到控制臺，但我希望它在瀏覽器視窗中顯示，就像我只是導航到<url>并顯示回應一樣。JavaScript 是否啟用了類似的功能：
fetch('<url>', {
headers: myHeaders,
method: 'GET',
credentials: 'include'
}).then(
function(response) {
response.json().then(function(data)) {
this.browserWindow.display(data);
});
})
我如何在瀏覽器視窗中顯示它，就像我通過搜索欄導航到 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，我們就有了解決方案。
uj5u.com熱心網友回復：
您基本上已經弄清楚了，但是如果您可以使用它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 元素，并對 API 提供的內容使用 innerTEXT。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/365062.html
標籤：javascript 谷歌浏览器 拿来 获取-api