Firebase Storage 이미지 오류 해결: 403·404·token·Rules 확인법

• Firebase Storage 이미지가 403일 때
• Firebase Storage 이미지가 404일 때
• 다운로드 URL token이 없을 때
• Storage Rules 확인 예시
• 공개 URL과 다운로드 URL 차이
• CORS 문제인지 권한 문제인지 구분하는 방법
• Firebase Storage 이미지 오류 FAQ

Firebase Storage 이미지가 403일 때

이미지 요청이 403이면 “파일은 있지만 읽을 권한이 없다”는 쪽을 먼저 의심합니다. 브라우저 새 탭에서 이미지 URL을 직접 열었을 때도 403이면 React 렌더링 문제가 아니라 Storage URL, token, Rules 문제일 가능성이 큽니다.

1. 이미지 src를 새 탭에 직접 열어 봅니다.
2. URL에 alt=media와 token=이 필요한 형태인지 확인합니다.
3. Storage Rules에서 해당 경로 read가 허용되는지 확인합니다.
4. 사용자별 비공개 파일이라면 로그인 상태와 파일 소유자 경로를 확인합니다.

Firebase Storage 이미지가 404일 때

404는 권한보다 파일 경로나 파일 존재 여부 문제일 가능성이 큽니다. 업로드 경로와 DB에 저장된 경로가 다르거나, 인코딩된 파일명, 대소문자, 폴더명이 달라진 경우가 많습니다.

잘못된 URL 예시
https://firebasestorage.googleapis.com/v0/b/my-app.appspot.com/o/products/image.png

문제 가능성
- 실제 파일 경로가 product/image.png 인데 products/image.png 로 저장됨
- 파일명 공백/한글/슬래시가 URL encoding 되지 않음
- 업로드 전에 DB에 임시 경로만 저장됨

해결 순서는 Firebase Console에서 실제 파일 경로 확인 → DB 저장값 비교 → URL encoding 확인 → 업로드 완료 후 URL 저장 여부 확인입니다.

다운로드 URL token이 없을 때

브라우저에서 바로 보여줄 이미지는 getDownloadURL로 받은 HTTPS 다운로드 URL을 사용하는 것이 안전합니다. gs:// 경로나 콘솔 내부 경로는 이미지 태그의 src로 바로 쓸 수 없습니다.

// 정상 다운로드 URL을 얻는 예시
import { getDownloadURL, ref } from 'firebase/storage';

const imageRef = ref(storage, 'products/' + fileName);
const downloadUrl = await getDownloadURL(imageRef);

정상 다운로드 URL 예시
https://firebasestorage.googleapis.com/v0/b/my-app.appspot.com/o/products%2Fimage.png?alt=media&token=PUBLIC_DOWNLOAD_TOKEN

Storage Rules 확인 예시

공개 이미지와 비공개 이미지를 같은 규칙으로 처리하면 보안과 접근성이 모두 흔들립니다. 공개 썸네일은 public 경로를 따로 두고 read만 열어두는 식으로 범위를 좁히는 것이 좋습니다.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /public/{allPaths=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }

    match /users/{userId}/{allPaths=**} {
      allow read, write: if request.auth != null
        && request.auth.uid == userId;
    }
  }
}

Rules를 바꾼 뒤에는 Firebase Console의 Rules Playground 또는 실제 다운로드 URL 접속으로 read가 의도대로 동작하는지 확인합니다.

공개 URL과 다운로드 URL 차이

Firebase Storage에는 파일을 가리키는 내부 경로와 브라우저가 접근할 수 있는 다운로드 URL이 따로 있습니다. DB에는 장기 관리용 storage path와 화면 표시용 download URL을 구분해 저장하면 유지보수가 쉽습니다.

구분	예시	용도	주의점
Storage path	products/image.png	파일 재참조, 삭제, 재발급	img src로 직접 사용하지 않습니다.
gs:// URL	gs://bucket/products/image.png	SDK 내부 참조	브라우저 이미지 주소로 부적합합니다.
Download URL	https://firebasestorage.googleapis.com/…	브라우저 표시	token과 권한 정책 변경 영향을 받습니다.

CORS 문제인지 권한 문제인지 구분하는 방법

CORS와 권한 문제는 모두 이미지 오류처럼 보일 수 있지만 확인 방법이 다릅니다. 이미지 URL을 새 탭에서 직접 열었을 때 실패하면 권한·URL 문제를 먼저 보고, 직접 접속은 되지만 fetch나 canvas 처리에서 실패하면 CORS 설정을 봅니다.

• 새 탭 직접 접속도 실패: 403/404, token, Rules, 파일 경로 확인
• 새 탭은 성공하지만 fetch 실패: bucket CORS 정책 확인
• 특정 사용자만 실패: 로그인 조건, userId 경로, custom claims 확인
• 배포에서만 실패: 저장된 URL, 환경별 bucket, 도메인 정책 확인

Firebase Storage 이미지 오류 FAQ

Firebase Storage 이미지가 403이면 무엇부터 확인하나요?

이미지 URL을 새 탭에 직접 열고, token과 Storage Rules를 먼저 확인합니다. 직접 접속도 실패하면 CORS보다 권한·URL 문제일 가능성이 큽니다.

Firebase Storage 이미지가 404이면 무엇이 문제인가요?

대부분 파일 경로, 파일명 인코딩, 업로드 완료 전 DB 저장, 삭제된 파일 참조 문제입니다. Console의 실제 경로와 DB 값을 비교합니다.

download token은 항상 필요한가요?

공개 read Rules로 열어둔 경로라면 token 없이 접근 가능한 구조도 만들 수 있지만, 일반적으로 getDownloadURL로 받은 URL을 쓰는 방식이 안전하고 명확합니다.

Firebase 오류 전체 흐름은 어디서 더 보나요?

Firebase 관련 오류는 Firebase 실무 오류 해결 모음에서 이어서 확인할 수 있습니다.

관련 글을 대표 허브 기준으로 이어서 보기

이 글과 비슷한 문제는 Firebase 오류 해결 가이드에서 전체 흐름을 먼저 확인하면 검색 의도와 해결 순서를 더 분명하게 나눌 수 있습니다.

• 대표 허브: Firebase 오류 해결 가이드
• Firebase 실무 로드맵
• Firebase 초기화 구조
• Firebase CORS 오류 해결
• Firebase 보안 규칙 설계
• Firebase Auth Context 설계