AWS S3 CORS 헤더 관련 이슈 해결방법

🤷‍♂️ CORS?

---

cors란? 

cors란 Cross Origin Resource Sharing을 의미한다. 

cors는 웹 브라우저에서 보안상의 이유로 도입되었는데. 현재 사용자가 접속한 웹 애플리케이션이 다른 출처의 리소스를 불러올 때, Access-Control-Allow-Origin 헤더를 보내주지 않으면 브라우저가 그 리소스를 거부하는 보안 정책 이다. 

즉 다른출처에 도메인에 요청을 보냈을때 보안상 요청이 불가능하다. 

 

다른 출처에 도메인에 요청을 보냈을때 위와 같은 에러를 보실수 있다. 

---

🤷‍♂️ AWS S3 cors Error?

---

React에서 바로 s3에 파일을 전송하는 로직을 작업하던 도중 s3 요청을 보낼때 받은 cors 에러.

 

---

🤷‍♂️ Soultion?

---

AWS S3 이동

권한 클리후 아래에 해당 내용을 볼수있다.

해당 값을 넣고 저장. 

모든 Method 허용하고, AllowedOrigins * (특정 도메인을 설정할 수 있다.) 전체 설정을 해줘서 문제해결. 

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