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

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

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

• http://www.html5rocks.com/en/tutorials/cors/
• https://developer.chrome.com/extensions/xhr
• http://en.wikipedia.org/wiki/Same-origin_policy

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

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 세팅을 추가해주면 된다.
추가 방법은 아래 문서 링크를 참고해 주기 바란다.

• http://aws.amazon.com/ko/blogs/aws/amazon-s3-cross-origin-resource-sharing/
• http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-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으로 접속했을 때를 위한 것이다.