Firebase 저장소의 CORS 에러 해결

이미지 최적화 과정에서 발생한 CORS 에러 해결 방법을 정리한 문서입니다.

문제점

로컬 개발 환경에서 이미지 최적화 로직을 실행할 때, Firebase Storage 서버에 저장돼있는 원본 이미지들을 불러오는 과정에서 CORS 에러가 발생했습니다.

에러 메세지

Access to image at 'https://firebasestorage.googleapis.com/v0/b/파일링크?alt=media&token=토큰' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

문제 코드

const loadImage = (src: string): Promise<HTMLImageElement> => {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.crossOrigin = 'anonymous';
    image.src = src;
    image.onload = () => resolve(image);
    image.onerror = (err) => {
      console.error(err);
      reject(new Error('Image failed to load'));
    };
  });
};

위 코드는 로컬 개발 환경에서 실행할 스크립트 파일에 작성된 이미지 최적화 코드의 일부로, 등록된 상품의 기존 이미지 링크 정보들을 사용해 이미지 객체를 동기적으로 생성하기 위해 Promise 를 활용한 loadImage 함수입니다.

---

문제 발생 원인

로컬 개발 환경 : http://localhost:5173

이미지 저장소 : https://firebasestorage.googleapis.com

이렇게 서로 다른 도메인(Origin)에서 리소스를 불러와서 Image 객체를 생성하는 경우에 브라우저의 보안 정책인 CORS (Cross-Origin Resource Sharing) 가 원인이 되어 발생합니다.

에러 메세지에 있던 "No 'Access-Control-Allow-Origin' header is present on the requested resource." 라는 문구는 다시말해 "Firebase Storage 서버에서 CORS 요청을 허용하지 않고있다" 라는 뜻입니다.

---

해결 방법

1. Firebase Storage 서버에 직접 CORS 설정을 진행합니다.

   1. Firebase CLI 와 gsutil 을 사용해 리소스 요청을 허용할 요청들을 자세히(도메인, HTTP 요청종류, 응답 헤더, 캐시 기간 등) 설정할 수 있습니다.

2. Vite 의 프록시 기능을 활용합니다.

3. Image 객체가 아닌 <img> 태그를 활용한 코드로 변경합니다.

   1. CORS 요청이 아닌 단순 요청을 하는 <img> 태그를 활용해서 이미지 최적화 코드를 리팩토링 합니다.

현재 이미지 최적화 관련 코드는 기존의 이미지들을 리팩토링된 형태에 맞게 가공해주는 일회용 코드이기 때문에 직접 CORS 설정을 하는 1번 방식과 기존 코드들을 모두 변경해야 하는 3번 방식보다 2번 방식을 채택했습니다.

프록시 기능을 사용하는 과정은 다음과 같습니다.

1. 기존 Firebase Storage 에 저장된 이미지 url 을 Vite 의 프록시가 찾아낼 수 있도록 개발 서버의 url 로 변경합니다.

   1. 프록시를 사용할 요청 url 은 http://localhost:5173/firebasestorage 입니다.

      const url = product.productImageUrlArray[j].replace(
        'https://firebasestorage.googleapis.com',
        'http://localhost:5173/firebasestorage',
      );

2. 변경된 url 을 찾아낼 수 있도록 vite.config.ts 파일에서 proxy 옵션을 설정합니다.

   1. target(리소스 서버), rewrite(프록시를 위해 추가된 url 삭제), changeOrigin(요청의 origin 을 수정) 옵션들을 설정합니다.

      export default defineConfig({
        // ... 다른 설정들
        server: {
          proxy: {
            '/firebasestorage': {
              target: 'https://firebasestorage.googleapis.com',
              changeOrigin: true,
              rewrite: (path) => path.replace(/^\/firebasestorage/, ''),
            },
          },
        },
      });

---

결과

Vite의 프록시 기능을 활용해 기존의 코드 변경을 최소화 하면서 CORS 에러를 해결했습니다.