[Firebase Storage] 데이터를 가져올 때 발생하는 CORS 오류에 대한 대응
배경
발생 중인 문제
그림을 다운로드하려면 왜 그림을 다운로드할 수 없습니까?
콘솔을 확인한 결과 다음 오류가 발생했습니다.
Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/***.jpeg' from origin 'https://online.gli-english.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
オリジン 'https://***.com' からの 'https://firebasestorage.googleapis.com/v0/b/***.appspot.com/o/groups***.jpeg' における XMLHttpRequest へのアクセスは、CORS ポリシーによってブロックされました。要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。
모르는 단어가 몇 개 생겼는데, 우선 이 잘못된 해결 방법부터 시작한다.해결책
gsutil
을 실행합니다.절차.
파일 시스템의 모든 위치에 Google Cloud SDK를 설치합니다.
https://cloud.google.com/storage/docs/gsutil_install?hl=ja#mac
사용자 고유의 경우/Users/Users/Project에 설치합니다.
모든 디렉터리에
cors.json
를 만들고 다음과 같은 내용을 설명합니다.[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
필요한 경우 origin 에 해당하는 Hosting URL을 추가합니다.URL은 Firebase Hosting의 콘솔에서 확인할 수 있습니다.
2조의 코스.json을 디버깅하기 위해 다음 명령을 실행합니다.
gsutil cors set cors.json gs://<your-cloud-storage-bucket>
URL은 Firebase Storage의 콘솔에서 확인할 수 있습니다.디버깅이 진행되었는지 확인하기 위해 다음 명령을 실행합니다.
gsutil cors get gs://<your-cloud-storage-bucket>
2로 설정된 json이 depro를 되돌려줍니다.앞에 화면에서 다운 받을 수 있으면 OK.
좀 더 복잡한 CORS 구성을 할 때 공식 문서에 상세한 내용이 적혀 있는 것 같습니다.
https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket
용어
이쪽 사이트는 매우 쉽게 귀결되기 때문에 제가 인용하도록 해 주십시오.
XMLHttpRequest
CORS policy
오리온 자리
Access-Control-Alow-Origin 머리글
Access-Control-Allow-Origin: *
사이트 축소판 그림
Reference
이 문제에 관하여([Firebase Storage] 데이터를 가져올 때 발생하는 CORS 오류에 대한 대응), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/taizo_pro/articles/b968ebbf0ed42d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)