표시 가져올 API 응답 브라우저 창에서

0

질문

내가 사용하고 가져 오기 API 를 쿼리하는 웹 서비스 일부터를 수동으로 추가할 필요 X-Custom 헤더입니다. 모든 예제는 내가 발견한 결과를 표시하 사용 console.log 으로 개발자 도구 콘솔창입니다.

가 없는 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 을 통해 검색 bar?

업데이트

그래서 나는 성공적이었다로드 결과로서:

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]. 수있는 경우 그림 eout 는 방법을"예쁜 디스플레이"JSON,우리는 해결책을 가지고 있습니다.

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

최고의 응답

2

당신이 대부분이 그것을 밖으로 생각하지만,경우 사용할 수 있습니다 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)이 코드 취약한,그것은 아마도 작은 위협,주어진 당신의 쓰임새.

에 대한 코드를 활용에서는 생산의 수가 있 접근이 이를 방지하기 위해 취약점,일반적인 탈출하는 어떤 문자열을 삽입하실 수 있습니다. 대체는 분석 결과를 만드는 HTML 요소를 삽입하려고 사용하 innerTEXT 에 대한 컨텐츠에서 제공하는 API 입니다.

2021-11-23 17:10:39

다른 언어로

이 페이지는 다른 언어로되어 있습니다

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