$ vi index.html
<!DOCTYPE html>
<html>
<body>
<h1>This is origin page.</h1>
</body>
<div id="fetchedcontent"/>
<script>
var fetchedcontent = document.getElementById("fetchedcontent");
fetch('https://cross-origin.kr-website.cafe24obs.com/cors.html')
.then((response) => {
return response.text();
})
.then((html) => {
fetchedcontent.innerHTML = html
});
</script>
</html>
작성한 index.html 파일을 origin 버킷에 업로드합니다.
이때 웹 브라우저에서 접근할 수 있도록 --acl-public 옵션을 통해 파일 권한을 공개로 설정하여 업로드합니다.
$ s3cmd put index.html s3://origin --acl-public
upload: 'index.html' -> 's3://origin/index.html' [1 of 1]
527 of 527 100% in 0s 8.78 KB/s done
Public URL of the object is: http://kr.cafe24obs.com/origin/index.html
(4) cross-origin 버킷 페이지 생성하기
마찬가지로 cross-origin 웹 사이트 버킷의 cors 페이지를 생성한 후, cross-origin 버킷에 업로드합니다.
$ vi cors.html
<b>This is from cross-origin page.</b>
$ s3cmd put cors.html s3://cross-origin --acl-public
upload: 'cors.html' -> 's3://cross-origin/cors.html' [1 of 1]
39 of 39 100% in 0s 695.60 B/s done
Public URL of the object is: http://kr.cafe24obs.com/cross-origin/cors.html
4. CORS 설정하기
(1) CORS 구성 요소
CORS Configuration은 버킷에 액세스할 수 있도록 허용할 origin과 각 origin에 대해 지원할 작업(HTTP Method) 및 기타 작업 별 정보를 식별하는 CORS Rule이 포함된 문서입니다.
CORS Configuration에는 최대 100개의 CORS Rule을 추가할 수 있으며, CORS Rule elements는 다음과 같습니다.
CORS Rule elements
Description
AllowedOrigin
http://www.example.com과 같은 cross-domain 요청을 허용할 origin을 지정합니다. origin 문자열에는 http://*.example.com과 같은 * 와일드카드 문자가 하나만 포함될 수 있습니다.
AllowedMethod
허용할 origin에 대해 지원할 HTTP Method(GET / PUT / POST / DELETE / HEAD)를 지정합니다.
AllowedHeader
ExposeHeader
MaxAgeSeconds
Preflight 요청에 대한 응답을 캐시할 수 있는 시간(초)을 지정합니다.
(2) CORS 설정하기
origin 웹 사이트 버킷이 GET 요청 권한을 가질 수 있도록 CORS 설정 파일을 작성합니다.
$ vi corsrules.xml
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>https://origin.kr-website.cafe24obs.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
작성한 corsrules.xml 파일을 사용하여 cross-origin 버킷의 CORS를 설정합니다.
