AWS S3 에서 파일 로드시 CORS 에러 해결 방법

    - 아마존 S3에서 CSS 파일 로드시 내부 url의 경로 파일(font등) 로드시 CORS(Cross-Origin Resource Sharing) 에러 발생하는 상황 해결법
    - 403 Forbidden 에러 발생 해결 포함


//-------------------------------------
Amazon S3 > 버킷 > 권한 선택


    - 버킷 정책 -> 편집
        - 403 Forbidden 에러 해결
        - 설정 변경후 적용에 10초 이상 걸릴 수 있음

"Condition": {
    "StringLike": {
        "aws:Referer": [
           "https://S3 URL Root/*",    <== 추가

//-------------------------------------
    - 정책 CORS(Cross-origin 리소스 공유) -> 편집 
        - 메뉴위치 : 버킷 권한 페이지 하단에 위치
        - CORS error 해결

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "https://서비스 도메인"
        ],
        "ExposeHeaders": []
    }
]

 

//-----------------------------------------------------------------------------
// 참고
https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/cors.html
https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/ManageCorsUsing.html

https://aws.amazon.com/ko/premiumsupport/knowledge-center/s3-configure-cors/

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "example.com"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

 

//-----------------------------------------------------------------------------

* AllowedHeaders / ExposeHeaders
 Content-Type, Origin, Authorization, Cache-Control, Expires, Pragma, sessionId,
Access-Control-Allow-Origin, Cross-Origin-Resource-Policy
Accept,    DNT,   Keep-Alive,   User-Agent,    
X-Requested-With,  If-Modified-Since,    Content-Range,   Range


* AllowedMethods
GET, HEAD, OPTIONS, PUT, PATCH, POST,  DELETE