[ CORS ] Cross Origin 리소스 공유 에러 해결

장고와 s3연동을 했다. 

 

어드민 페이지를 보는데 개발자도구에서 

http:// ~: ~ has been blocked by CORS policy: No 'Access-Control-Aloow-Origin' header is present on the requested resource. 라는 에러가 나왔다. 

 

CORS정책 때문이라는 것같다. 

 

1. S3 권한탭에서 CORS 편집을 누른다. 

2. JSON 형식으로 정책을 입력한다. 

 

과거 블로그들을 검색해도 안되는데 형식이 xml 이라 그렇다. 

 

찾다보니 JSON으로 하신 고마운 분이 계셨다.

 

www.enteroa.com/2020/11/05/s3-%EB%B2%84%ED%82%B7-cors-%EC%84%A4%EC%A0%95-json/

S3 버킷 CORS 설정 (json)

이분 것을 참고했다. 

 

[
    {
        "AllowedOrigins": [ "http://localhost:*" ],
        "AllowedMethods": [ "GET", "PUT", "POST", "HEAD" ],
        "AllowedHeaders": [ "*" ],
        "ExposeHeaders": [ "x-amz-server-side-encryption", "x-amz-request-id", "x-amz-id-2" ],
        "MaxAgeSeconds": 3000
    }
]

이렇게 했는데 안됐다. 이우는 AllowedOrigins에 localhost: 이부분이 원이이었다. 

http://127.0 ~ : port num 이렇게 하니까 에러가 없어졌다. 

 

 

* CORS 란? 

developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN