AWS S3의 Cross Domain 해결을 위한 CORS 사용

munilive
Written by munilive on (Updated: )

XMLHttpRequest를 통하여 서로 다른 도메인 간에 통신을 해야 하는 경우 브라우저의 보안 정책으로 인하여 통신이 불가능하다. 이런 경우 CORS를 통하여 이를 해결할 수 있다.

CORS(Cross-Origin Resource Sharing)가 무엇인지에 대한 자세한 내용은 아래 링크들을 참고해 주기 바란다.

정리해서 이야기하면 리소스 또는 데이터를 받아와야 하는 쪽 서버에서 응답을 보내는 헤더 아래 내용을 담아서 보내라는 이야기

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Access-Control-Allow-Origin: 는 필수 값으로 요청을 보내는 쪽의 도메인주소를 적으면 된다.

AWS의 S3에서는 버킷에서 CORS 세팅을 추가해주면 된다.
추가 방법은 아래 문서 링크를 참고해 주기 바란다.

AWS S3 Bucket CORS 설정에 추가해야 하는 내용은 아래와 같이 작성하면 된다.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://munilive.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>http://*.munilive.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

CORS를 추가하여 허용하게 되면 추가된 버킷의 모든 파일에 적용된다.

중요 포인트

*.munilive.com으로 설정하면 하위 서브도메인은 모두 적용되지만 정작 munilive.com으로 접속하면 Cross Domain 이 해결되지 않는다. 그래서 CORSRule를 하나 더 추가하는데 이는 오직 munilive.com으로 접속했을 때를 위한 것이다.

Comments

comments powered by Disqus