S3에 로컬에서 이미지를 업로드하려고 CORS 오류

고마워요, 라스칼입니다.
이번에는 로컬 호스트에서 S3에 이미지 업로드하려고했는데, 다음과 같은 오류가 나왔을 때의 대처법을 써갑니다.

Access to XMLHttpRequest at 'https://ほにゃらら.s3.amazonaws.com/?max-keys=0' from origin 'http://localhost:3000' 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.

해야 할 일

S3에 CORS 설정을 작성합니다.

S3 > 업로드할 버킷 > 사용 권한 탭의 맨 아래에 CORS 설정을 작성할 수 있습니다.



여기가 비어 있고 CORS 설정이 작성되지 않았기 때문에 로컬 호스트의 업로드가 잘못된 것으로 거부되는 것 같습니다.

편집을 클릭하여 CORS 설정을 작성합니다.
여기에 주의가 필요합니다만, JSON으로 쓰지 않으면 안 되는데 XML 형식의 샘플 코드 밖에 없습니다.
공식 문서조차 XML 형식으로 표시하고 있습니다.

🤔 최근 바뀌었습니까?

JSON으로 쓰면 이렇게됩니다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://localhost:3000"
        ],
        "ExposeHeaders": []
    }
]

이것으로 CORS 설정은 완벽!



고마워요 🎉.