[AWS S3] GET 요청 시 403 Forbidden 오류 해결

이번 프로젝트에서는 이미지 업로드 용으로 AWS S3 서버를 사용하였다.

사용자가 서비스에서 이미지를 업로드하면 이를 S3 서버에 업로드 하고, 파일명을 POST 요청으로 DB에 넘겨준다.

이미지를 보여줄 때는 DB에서 API로 파일명을 받고, 이를 S3 URL에 넣어 보여주는 방식이다.

 

그런데, 분명 이미지를 올렸는데도 보여지지 않는 오류를 발견했다.

이미지 자체가 업로드 되지 않은 걸까 싶어 S3 버킷을 확인해보았는데

 

이미지가 잘 들어가 있었다.

 

그럼 뭐가 문제일까 싶어 네트워크를 확인해보았고, S3 URL로 이미지를 가져오는 GET 요청에서 403 에러가 난다는 걸 발견했다.

403이면 권한 관련 오류이니, ACEESS KEY와 SECRET KEY가 잘못된 걸로 생각했으나 다른 팀원에게선 오류가 발견되지 않았다.

 

S3 버킷과 코드를 찬찬히 뜯어본 결과 원인을 찾았는데, 파일명을 잘못 요청하고 있다는 것이었다.

 

형광펜 칠해진 부분을 보면, 파일명은 test (1).jpg인데 객체 URL에서는 test+(1).jpg로 나와있다.

S3 서버에 이미지가 업로드 되면 파일명의 공백 부분이 +로 처리되는 것 같았다.

객체 URL은 test+(1).jpg인데, 나는 DB에 파일명을 test (1).jpg로 넣어준 것이다.

따라서, DB에서 API로 파일명을 받아 이미지로 보여줄 때 https://~~~~~/test (1).jpg로 요청하게 되는데, 그런 객체 URL은 존재하지 않으니 오류가 난다.

 

오류의 원인을 깨닫고 DB에 POST 요청으로 파일명을 넘겨주기 전에 공백 부분을 +로 replace하는 처리를 해주었고, 더 이상 에러가 나지 않았다 👍

 

/* 전 */
const temp = e.target.value.split("\\")
setFileName(temp[2])

/* 후 */
const temp = e.target.value.replace(" ", "+").split("\\")
setFileName(temp[2])