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

XMLHttpRequest 를 통하여 서로 다른 도메인간에 통신을 하거나 데이터를 가져와야 하는 경우 CORS를 이용하면 된다.

CORS에 대한 내용은 아래 URL들을 참고
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 참고

아래와 같이 추가 하면 된다.

<?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 으로 접속 했을 때를 위한 것이다.

CC BY-NC-SA 4.0 This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.