【Cloud Storage for Firebase】~has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

클라이언트의 javascript에서 Cloud Storage for Firebase의 이미지 데이터를 처리하려고 할 때,
이와 같은 오류가 발생했습니다.

~has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

CORS에 대한 설명이 많으므로 이 해결 방법을 공유합니다.

1. GCP 콘솔을 열고 상단의 네비게이션 바에 있는 >_아이콘 버튼을 클릭하여 클라우드 터미널 세션을 시작합니다.





2. 연필 아이콘을 클릭하여 편집기를 열고 cors.json 파일을 만듭니다.







3. 다음을 입력하여 저장



cors.json
[
  {
    "origin": ["https://example.com"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

여기서 https://example.com을 허가하고 싶은 도메인으로 변경한다.
만약 디버그시에 모든 도메인을 허가하는 경우에는 "origin": ["*"]와 같이 하면 된다.
※보안에는 충분히 주의해 주세요

4. gsutil cors set cors.json gs://your-bucket 실행합니다. (여기에 입력하는 버킷의 주소는, 취급하고 싶은 화상이 들어 있는 버킷의 것을 사용하면 좋다)



여러분이 조금이라도 고전하는 시간을 줄여 효율적으로 개발할 수 있게 되면 좋겠습니다!

좋은 웹페이지 즐겨찾기