has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 해결 방법

 

React로 파일 업로드 작업을 구현하기 위해서 AWS의 S3(Simple Storage Service)를 사용하려고 하였습니다. 제가 생성한 버킷의 경로에 파일 이미지를 추가하려고 하는데 아래와 같은 에러가 발생하였습니다. 저와 같은 에러가 발생하였다면 이 글을 보고 시간 절약해서 빠르게 해결하셨으면 좋겠습니다.

 

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.  

 

 

[에러 원인]

위에서 발생한 에러는 Cors에러로 현재 도메인의 권한이 허용이 안되게 설정이 돼서, 접근이 되지 않아 발생한 에러입니다. 사용 중인 버켓에 도메인의 권한만 설정해 주시면 CORS 에러는 해결됩니다.

 

 

[해결 방법]

1. 생성한 버킷에서 권한 탭을 클릭합니다.

 

2. CORS 에서 편집 버튼을 클릭합니다.

 

3. 아래와 같이 CORS 권한을 본인이 사용 중인 도메인으로 바꿔줍니다. [저는 예시로 일단 허용값(AllowedOrigins)을 전체(*)로 설정하였습니다.]

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]