[Web타겟] NCP Object Storage CORS설정(S3 Browser)

1. 문제 상황: Video접근 시 SOP(Same-Origin Policy)위반으로 인한 접근 거부

웹 플랫폼 제공을 위해 VideoClip을 모두 URL로 변경하였다. URL은 NCP ObjectStorage의 File Link다. 

WebGL을 통한 Unity프로젝트 빌드로 웹 브라우저 실행에 성공했으나, blocked by CORS policy를 만났다.

---

2. 해결 방법: S3 Browser 통한 NCP Object Storage의 CORS설정

내 웹 애플리케이션 서비스 제공처(지금은 localhost:XXXXX), 

웹 브라우저에서 요청을 보내는 Object Storage는 Same-Origin이 아니다.

그러므로 Object Storage에서 CORS설정을 해주어, SOP예외적으로 접근을 만들어주려고 한다.

 

그렇다면 NCP Object Storage에 CORS설정을 해주어야 하므로,

스토리지 접근을 위한 Windows Client Tool인 S3 Browser를 설치했다.

S3 Browser - Amazon S3 Client for Windows. User Interface for Amazon S3. S3 Bucket Explorer.

 

아래와 같이 설정하고, ncloud.com마이페이지->인증키관리에서 ID와 Key를 복사해넣으면 설정이 완료된다.

(NAVERCloud공인교육 랩 가이드는 정말 짱이다!!)

 

 

S3 Browser설명을 들여다보니 이런 게 있었다 - CORS Configuration 

• How to enable Cross-Origin Resource Sharing for a bucket.

 

아래는 S3 Browser의 샘플이다. 이걸 CORS Configuration의 InputField에 넣어주면 된다.

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>http://www.example.com</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

나는 AllowOrigin에 웹 애플리케이션의 URL(추후 도메인 설정)을 넣고,

AllowedMethod는 GET만 포함시켜주었다. (URL로 동영상 조회만 허용할 것이기 때문이다.)

---

3. 결과

이제 빌드 후 CORS관련 이슈 없이 동영상을 잘 불러온다

---

참고자료

• How to enable Cross-Origin Resource Sharing for a bucket.

How to manage Amazon S3 Bucket CORS Configuration. How to enable Cross-Origin Resource Sharing for Amazon S3 Bucket.