문제 상황
이미지를 req의 form-data 형식으로 받아오면 해당 이미지를 S3 버킷에 업로드하고 저장된 url값을 반환하는 S3 이미지 업로드 API를 구현하였습니다.
이때 프론트에서 해당 API 실행 후 업로드된 이미지를 zip으로 다운받으려고 했더니 상단의 사진과 같이 CORS 에러가 발생하는 문제를 겪게 되었습니다.
해결 방법
문제 원인
문제의 이유는 S3 이미지 url을 JavaScript에서 가져오려고 하는데 S3에서 Access-Control-Allow-Origin 헤더가 없기 때문에 브라우저가 JS에서 fetch 요청을 차단했기 때문입니다.
이를 해결하기 위해선 AWS 버킷의 CORS 권한 설정을 추가해줘야 합니다.
해결 과정
- 우선 해당 버킷의 권한 속성 버튼을 클릭합니다.
- 그 후 하단의 CORS 부분까지 스크롤한 후 편집 버튼을 클릭합니다.
- CORS 설정 코드를 작성한 후 저장합니다.
이때 각 JSON 코드의 설정 내용은 다음과 같습니다.
1) "AllowedHeaders": ["*"] : 클라이언트(브라우저)에서 요청할 때 사용할 수 있는 헤더를 정의합니다. 이때 “”는 모든 요청 헤더를 허용한다는 의미입니다.
2) "AllowedMethods": [”GET”, “POST”, “PUT”, “DELETE”]: 클라이언트가 S3 리소스를 요청할 때 허용되는 HTTP 메서드를 정의합니다. S3 API는 get, post, put, delete 모두 구현 예정이기 때문에 각 메서드를 모두 정의하였습니다.
3) "AllowedOrigins": [””]: CORS 에러가 나지 않게 하기 위해 요청을 허용할 출처(origin)을 정의하는 것입니다., 이때 “*”는 모든 출처의 요청을 허가한다는 의미입니다.
4) "ExposedHeaders": []: 브라우저가 응답에서 JS로 접근할 수 있는 응답 헤더를 지정합니다. 현재 빈 값이기 때문에 기본적인 것만 접근 가능하도록 허용한 것입니다.
5) "MaxAgeSeconds": 3000: 브라우저가 CORS 요청 결과를 캐시하는 시간을 의미합니다. 3000초 동안 같은 요청에 대해서는 preflight를 다시 보내지 않아도 되므로 성능이 좋습니다.
기존에 발생했던 에러는 AllowedOrigins: ["*"] 설정을 통해 해결할 수 있습니다.
