파이어 베이스에서 이미지 받아오기 와 CORS

Sming·2021년 9월 2일
2

이슈 모음집

목록 보기
2/3

이번 이슈는 파이어베이스의 storage에 이미지를 저장한뒤에 그걸 불러와서 src로 이용할때 생기는 CORS 에러에 대해서 알아보려고 한다.

CORS란?

CORS는 Cross-Origin Resource Sharing 의 약자이며 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할숭 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.
개발을 하면서 정말 많이 만날게 될 오류이므로 잘 알아두는게 중요하다.

같은 주소, 같은 포트에 있는 리소스를 불러올 때는 문제가 없지만 다른 출처의 리소스를 요청하게 되면 보안적인 문제로 기본적으로 이를 차단함.

mdn 공식 문서에 따르면 CORS를 사용하는 요청은 다음과 같다.

  • 위에서 논의한 바와 같이, XMLHttpRequest와 Fetch API 호출.
  • 웹 폰트(CSS 내 @font-face에서 교차 도메인 폰트 사용 시),
  • WebGL 텍스쳐.
  • drawImage() (en-US)를 사용해 캔버스에 그린 이미지/비디오 프레임.
  • 이미지로부터 추출하는 CSS Shapes.
  • 이번에는 canvas의 drawImage를 사용하여 CORS 에러가 나게되었다.

    이미지 불러올때 생기는 에러

    먼저 일반적으로 canvas에 외부 src가 들어간것을 이용하면 Tainted canvases may not be exported 오류가 나오게 된다.

      const image = new Image();
    
      image.onload = () => {
        return ok(resize());
      };
    
      image.src = file;
      image.crossOrigin = "Anonymous";

    이런식으로 image태그에 crossOrigin="Anonymous" 로 설정을 해준다. 이것은 우리가 font-awesome을 이용할때 우리 계정에서의 kits에서 script코드를 가져오는데 그때도 crossOrigin="Anonymous" 이 있는것을 확인할수 있다.

    하지만 실행을 해본다면

    이런식으로 CORS 오류가 나오게 될것이다.

    원래라면 CORS 에러를 해결할시 백엔드단에서 header를 건드리거나
    서버를 건드릴수 없는 상황이라면 proxy 서버를 이용한다.

    firebase를 이용한 CORS 에러 해결

    하지만 이번에는 firebase를 이용하기 때문에 firebase storage에 있는 공식문서에서 해결책을 제시해주고 있다

    파이어 베이스 CORS 해결법

    설명에 따르면 먼저 google cloud storage를 다운받고 cloud shell을 열면 gsutil 명령줄 도구를 사용할수 있게 된다. 여기서 cors.json을 다음과 같이 설정하면 된다.

    [
    {
      "origin": ["*"],
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
    ]

    그런뒤 명령어로 gsutil cors set cors.json gs://<your-cloud-storage-bucket> 다음을 실행 시키면 된다고 한다. 여기서 cloud-storage-bucket은 firebase의 storage 창에서 확인이 가능하다.

    하지만 cors.json을 어디에 만들어야 될지 헷갈릴수 있는데

    다음과 같은 경로에 cors.json을 생성해주고 위의 코드와 동일하게 설정해주면 된다.

    아까 설명한 명령어를 실행시킨뒤 gsutil cors get gs://<bucket_name>라는 명령어로 내 프로젝트에 cors설정이 잘 들어갔는지 확인할수 있다.

    이런뒤 실행 시키면 오류가 나지않고 잘 돌아가는것을 확인할수 있다.

    profile
    딩구르르

    0개의 댓글