[React] HTTP 403 이미지 로드 에러 googleusercontent.com

어떤 에러?

프로필 이미지가 사용되는 어느 곳이던 나타나던 이 403 에러..

프로필 이미지를 제대로 못가져와서 그런 듯 보였다.

그래서 프로필 이미지가 빈번하게 제대로 뜨지 않았다.

이렇게 비어있는 이미지를 확인해보면 src가 비어있는 것을 볼 수 있다.

 

 

 

 

 

원인 파악

이 문제는 구글로 로그인한 계정에만 나타나는 현상..

403 에러는 서버에 요청을 했지만 권한상의 문제로 거절되었다는 에러라는데, 보통 다른 도메인에서 호출할 때 발생한다고 한다.
다른 도메인에서 온 요청임을 확인하고 거절했단 것이다.

 

 

 

 

해결 과정

https://stackoverflow.com/questions/56242788/http-403-on-images-loaded-from-googleusercontent-com

HTTP 403 on images loaded from googleusercontent.com

 

 

스택 오버플로우에서 같은 오류의 답변을 찾을 수 있었다.

이미지 태그에 referrerPolicy="no-referrer"를 추가해주어 해결했다.

 

외부 링크 공유 금지가 적용된 이미지를 no-referrer 설정을 통해서 보여준다.

 

   <ProfileImage
          src={
            profileImg === '' || profileImg === undefined
              ? defaultProfile
              : profileImg
          }
          alt="프로필이미지"
          referrerPolicy="no-referrer"
    />

 

 

해결하고 보니 프로필 이미지를 한 번이라도 수정한 경우가 없다면 구글 계정 같은 경우 요청헤더 주체가 달랐다. (당연하겠지만 👀)