Chrome 개발자 도구를 통해 보호된 서버 콘텐츠에서 데이터 가져오기

누군가 최근에 ngrok.com을 사용하여 액세스할 수 있는 보호된 서버를 보여주었습니다. Ngrok을 사용하면 시스템에서 실행 중인 서버를 온라인으로 제공할 수 있습니다. 매우 좋습니다. 컴퓨터에 ngrok를 설치한 다음 터미널에서 ./ngrok http {{whatever the port}}(예: ./ngrok http 5000)와 같은 스크립트를 실행해야 합니다(실행 가능한 ngrok 다운로드 파일이 압축 해제된 폴더에 있어야 함). to), 서버에 액세스하는 데 사용할 수 있는 임의의 URL을 생성합니다. 컴퓨터에서 서버를 끄면 localhost 포트에 더 이상 아무것도 없기 때문에 URL 작동이 중지됩니다. ./ngrok Windows 시스템을 사용하기 때문인 것 같습니다.

스크립트./ngrok http --auth=username:password {{whatever the port your localhost server is running in}}를 실행하여 보호할 수 있습니다. 제공된 URL로 이동하면 다음을 얻을 수 있습니다.



결정된 사용자 이름과 암호를 입력하면 콘텐츠에 액세스하게 됩니다.

이제 가져오기 API 및 Chrome 개발자 도구를 사용하여 콘텐츠에 액세스하는 방법:

콘솔 탭으로 이동합니다

.

쓰기:

const res = await fetch('{{ngrok URL}}', {headers: {'Authorization': `Basic ${btoa("username:password")}`}})

console.log(await res.json())

사용자 이름과 암호는 base64로 인코딩되어야 하며 btoa()는 the method to do so 입니다. 문자열이어야 하므로 "username:password"를 작성하십시오.

Basic Authorization은 엔드포인트가 HTTP로 보호될 때 필요합니다. 자격 증명을 전달하려면 'Authorization' 헤더(따옴표가 필요함) 값도 문자열이어야 합니다: Basic ${btoa("username:password")} .

ngrok url을 연 브라우저의 탭에서 수행하십시오. 그렇지 않으면 요청이 동일한 도메인에서 오지 않는 경우 콘텐츠 제공을 방지하는 동일한 사이트 정책에 부딪히게 됩니다.

도움이 되었기를 바랍니다.