S3 CORS 테스트해보기
S3에서 CORS를 적용하여 다른 Origin에서 접근을 하고자 한다면 Headers에 Cors정책을 추가해 주어야 한다.
외부에서 객체를 액세스할 버킷을 하나 생성해준다.
이 버킷을 생성할 땐 퍼블릭 엑세스 차단을 비활성화 해주고 생성하고, 3개의 파일을 업로드해준다.
그리고 정적 호스팅을 활성화해준다.
해당 내용으로 버킷 정책을 설정해준다
위 버킷을 생성할때 처럼 단순히 퍼블릭 액세스를 모두 해제해주면 누구나 해당 데이터에 접근이 가능하기 때문에 퍼블릭 액세스를 허용한 다음에는 버킷 정책을 반드시 설정해주어야 한다.
버킷 정책을 설정 안하면 정적 호스팅한 url로 접속시 403 Forbidden 에러 뜸.
{
"Version": "2012-10-17",
"Id": "Policy1724833189112",
"Statement": [
{
"Sid": "Stmt1724833188297",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::myk-cors-bucket/*"
}
]
}
index.html 내용
<html>
<head>
<title>AWS TEST</title>
</head>
<body>
<h1>AWS S3 Testing..</h1>
<p>Hello</p>
</body>
<img src="cloud.png" width="500" />
</html>
error.html 내용
<h1>Error</h1>
이제 이 버킷에 액세스를 제공해줄 버킷을 생성해준다. 이때 만드는 버킷은 퍼블릭 액세스를 비활성화 한 상태로 만들어야 하며, 기존에 만든 버킷과는 다른 리전을 가지고 있어야 한다.
다른 리전을 가지게 됨으로써 이 버킷은 이전에 만든 버킷과 다른 Origin으로 형성하는 것임.
이 버킷은 리전 도쿄(ap-northeast-1)에 만들었고, 4개의 파일을 업로드해준다.
index.html 내용
<html>
<head>
<title>AWS TEST</title>
</head>
<body>
<h1>AWS S3 Testing..</h1>
<p>Hello</p>
</body>
<img src="cloud.png" width="500" />
<!-- CORS demo -->
<div id="tofetch"/>
<script>
let tofetch = document.getElementById("tofetch")
fetch('extra.html').then((response) =>{
console.log("response",response)
return response.text();
}).then((html) =>{
console.log("html",html)
tofetch.innerHTML = html
})
</script>
</html>
extra.html 내용
<h1>extra Page</h1>
이제 새롭게 만든 버킷의 웹 호스팅을 활성화해주고, 버킷 정책을 동일하게 설정해준다.
여기서, 버킷 정책을 등록할 때 먼저 버킷의 퍼블릭 액세스 차단을 비활성화 해준다.
퍼블릭 액세스 차단 상태에서는 버킷 정책을 등록,수정을 할 수 없기 때문에 일단 비활성화 한 후, 버킷 정책을 수정,등록한다.
처음 만들었던 버킷(myk-cors-bucket)의 index.html 파일을 수정해서 확인해보자.
도쿄 리전에 만들었던 버킷의 extra.html 리소스를 이 버킷의 index.html에서 불러오도록 수정해본다.
<html>
<head>
<title>AWS TEST</title>
</head>
<body>
<h1>AWS S3 Testing..</h1>
<p>Hello</p>
</body>
<img src="cloud.png" width="500" />
<!-- CORS demo -->
<div id="tofetch"/>
<script>
let tofetch = document.getElementById("tofetch")
fetch('http://myk-cors-test-bucket.s3-website-ap-northeast-1.amazonaws.com/extra.html').then((response) =>{
console.log("response",response)
return response.text();
}).then((html) =>{
console.log("html",html)
tofetch.innerHTML = html
})
</script>
</html>
index.html의 내용을 위와 같이 수정한 후 웹 url에 접속하면 extra.html 파일이 불러와지지 않고 콘솔에 해당 에러가 찍히게 된다. (Access-Control-Allow-Origin)
이런 경우에 S3 CORS 설정을 통해 해결해보자.
액세스를 시도할 버킷의 권한으로 이동 → 가장 하단에 있는 CORS 편집
→ 맨 아래 CORS 편집에 해당 json을 넣는다.
- AllowedOrigins 에는 요청을 보내는 버킷의 URL
[
{
"AllowedHeaders": [
"Authorization"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"http://myk-cors-bucket.s3-website.ap-northeast-2.amazonaws.com"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
해당 설정 후 다시 url로 접속하면 이번엔 해당 리소스가 가져와지는 것을 확인할 수 있다.
댓글남기기