이 Codelab에서 리소스를 가져올 때 same-origin이 어떻게 작동하는지 확인하세요.
설정: 동일한 출처에서 페이지 가져오기
데모는 https://same-origin-policy-fetch.glitch.me에서 호스팅됩니다.
이 간단한 웹페이지는 fetch를 사용하여 https://same-origin-policy-fetch.glitch.me/fetch.html에서 리소스를 로드합니다. index.html와 fetch.html가 동일한 출처를 공유하므로 실시간 미리보기에 200가 표시됩니다.
1. 다른 출처에서 페이지 가져오기
가져오기 URL을 https://www.google.com(으)로 변경해 보세요.
실시간 미리보기에 무엇이 표시되나요?
리소스를 요청했으므로 브라우저에서 가져오기 요청을 차단했을 것입니다. 데이터를 가져올 수 있습니다 즉, 공격자가 교차 출처 정보를 읽을 수 없으며 리소스에 대한 액세스를 허용할 수 있습니다.
2. 교차 출처 리소스 가져오기
가져오기 URL을 https://api.thecatapi.com/v1/images/search(으)로 변경해 보세요.
실시간 미리보기에 무엇이 표시되나요?
가져오기 URL의 출처는 다르지만 상태 코드 200이 표시되어야 합니다. 왜냐하면 최신 웹 애플리케이션에서는 종종 로드를 위해 교차 출처 리소스를 요청합니다. API 엔드포인트를 쿼리할 수 있습니다 이러한 사용 사례를 수용하기 위해 교차 출처 리소스 공유 (CORS)라는 메커니즘이 교차 출처 리소스 로드가 허용되는 브라우저 CORS에 대한 자세한 내용은 교차 출처 리소스를 안전하게 공유를 참고하세요.