불투명 한 반응은 무엇이며 어떤 목적으로 사용됩니까?

fetch오래된 웹 사이트의 URL을 시도했는데 오류가 발생했습니다.

Fetch API cannot load http://xyz.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://abc' is therefore not allowed access.
If an opaque response serves your needs, set the request's mode to 'no-cors'
to fetch the resource with CORS disabled.

메시지를 이해하고 불투명 한 응답을 반환하는 요청을 시도했습니다.

fetch("http://xyz", {'mode': 'no-cors'})

좋아, 이제 작동하지만 읽을 수 없습니다. = \

불투명 한 반응의 목적은 무엇입니까?

서비스 워커가 불가지론 적 캐시로 작동하는 경우를 고려하십시오. 유일한 목표는 네트워크에서 얻을 수있는 것과 동일한 리소스를 제공하지만 더 빠릅니다. 물론 모든 자원이 원산지의 일부가되도록 보장 할 수는 없습니다 (예 : CDN에서 제공되는 라이브러리 고려). 서비스 워커는 네트워크 응답을 변경할 수 있으므로 응답의 내용이나 헤더, 결과에 관심이 없는지 확인해야합니다. 응답을 캐시하고 더 빨리 제공 할 수있는 블랙 박스로서의 응답에만 관심이 있습니다.

이것이 { mode: 'no-cors' }만들어진 것입니다.

불투명 한 응답은 JavaScript로 액세스 할 수 없지만 여전히 Cache API로 캐시fetch 하고 서비스 워커 의 이벤트 핸들러에서 응답 할 수 있습니다 . 따라서 제어 할 수없는 리소스 (예 : CORS 헤더를 설정하지 않은 CDN의 리소스)에도 앱을 오프라인으로 만드는 데 유용합니다.

Node JS 앱을위한 솔루션도 있습니다. CORS Anywhere는 프록시 요청에 CORS 헤더를 추가하는 NodeJS 프록시입니다.

프록시에 대한 URL은 문자 그대로 경로에서 가져와 유효성 검사 및 프록시됩니다. 프록시 URI의 프로토콜 부분은 선택 사항이며 기본값은 "http"입니다. 포트 443이 지정되면 프로토콜의 기본값은 "https"입니다.

이 패키지는 쿠키를 제외하고 http 메소드 또는 헤더에 제한을 두지 않습니다. 사용자 자격 증명 요청이 허용되지 않습니다. 브라우저에서 직접 방문하지 않도록 요청을 프록시하기 위해 헤더를 요구하도록 앱을 구성 할 수 있습니다. https://robwu.nl/cors-anywhere.html

자바 스크립트는 대답을 얻는 것이 약간 까다 롭습니다. 백엔드에서 API를 가져 와서 프론트 엔드로 호출하여 문제를 해결했습니다.

public function get_typechange () {

    $ url = "https://........";
    $ json = file_get_contents ($url);
    $ data = json_decode ($ json, true);
    $ resp = json_encode ($data);
    $ error = json_last_error_msg ();
    return $ resp;

}