'fetch' 유형에서 fetch 응답을 처리하는 방법

'fetch' 유형에서 fetch 응답을 처리하는 방법

fetch 호출에서 URL로의 응답을 올바르게 해석하려고 합니다.이것은 json 문자열이라고 생각됩니다.비슷한 투고를 바탕으로 여러 변형을 시도했지만 유용한 데이터를 얻을 수 있는 방법은 없었습니다.다음은 한 가지 시도입니다.

fetch('http://serverURL/api/ready/', {method: "POST", mode: "no-cors"})
    .then(function(response) { 
        response.json().then(function(data) {
            console.log('data:' + data);
        });
    })
    .catch(function(err) {
        console.log('Fetch Error :-S', err);
    });

그러면 콘솔에 구문 오류가 반환됩니다.

SyntaxError: JSON.parse: JSON 데이터의 행 1에서 예기치 않은 데이터 끝

따라서 JSON이 아닐 수 있습니다.console.log 행에 브레이크 포인트를 삽입하고 응답 위에 마우스 포인터를 놓으면 다양한 필드가 있는 응답 개체(?)가 표시됩니다.

status:0이 유효한 응답을 얻지 못했음을 나타내는 것을 어떻게 해석해야 할지 모르겠습니다.단, 개발자 도구의 [Network]탭을 체크하고 페치라인을 클릭하면 상태가 200으로 표시되고 [Response]SON 섹션에는 URL을 브라우저의 URL 바에 직접 입력하는 경우에도 표시되는 메시지 정보가 표시됩니다.JSON 문자열을 표시하는 "Response payload" 섹션도 마찬가지입니다.

{"msg": "API가 준비되었습니다.". "success": true}

그럼.. json처럼 보이지 않나요?하지만 fetch는 이것을 json으로 수집할 수 없습니다.

다른 바리에이션이 있습니다만, response.json() 대신 response.text()를 사용합니다.

fetch('http://serverURL/api/ready/', {method: "POST", mode: "no-cors"})
    .then((response) => {
        console.log(response);
        response.text().then((data) => {
            console.log("data:" + data);
    });
});

그러면 응답 개체가 콘솔에 인쇄됩니다(위의 경우와 같음: ok: false, status: 0, type: opaque 등).두 번째 console.log 파일은 데이터 뒤에 아무것도 출력하지 않습니다.response.json을 사용하면 위와 같은 데이터 끝 구문 오류가 나타납니다.

좋은 생각 있어요?서버가 fetch의 요구나 요구를 제공하지 않는 것은 알고 있습니다만, (적어도 브라우저에서 URL을 직접 사용하는 경우) json이나 text 같은 정보를 제공할 필요가 있습니다.

기본적으로 불투명한 요청에서 응답 본문에 액세스할 수 없습니다.

모드 추가: 'No-cors'는 마법처럼 동작하지 않습니다.브라우저는 기본적으로 프런트엔드 코드가 크로스 오리진 리소스에 액세스하는 것을 차단합니다.사이트에서 Access-Control-Allow-Origin을 응답으로 전송하면 브라우저는 해당 차단이 완화되고 코드가 응답에 액세스할 수 있게 됩니다.

그러나 사이트에서 응답으로 Access-Control-Allow-Origin 헤더를 전송하지 않으면 프런트엔드 JavaScript 코드가 해당 사이트의 응답에 직접 액세스할 수 없습니다.특히 모드를 'no-cors'로 지정한다고 해서 문제가 해결되지는 않습니다(실제로 상황을 악화시킬 뿐입니다).

https://stackoverflow.com/a/43268098/1666071 에서

★★★★★★★★★★★★★★★★★★★★.fetch★★★★

no-cors : 메서드가 HEAD, GET 또는 POST 이외의 것이 되는 것과 헤더가 단순한 헤더 이외의 것이 되는 것을 방지합니다.이러한 요구를 대행 수신하는 ServiceWorkers는 단순한 헤더 이외의 헤더를 추가하거나 덮어쓸 수 없습니다.또한 JavaScript는 결과 응답의 속성에 액세스할 수 없습니다.이를 통해 ServiceWorkers가 웹의 의미에 영향을 주지 않고 도메인 간 데이터 유출로 인한 보안 및 프라이버시 문제를 방지할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode

언급URL : https://stackoverflow.com/questions/54896998/how-to-process-fetch-response-from-an-opaque-type