[Firebase Storage] 데이터를 가져올 때 발생하는 CORS 오류에 대한 대응

6625 단어 FirebaseFirestoretech

배경

  • 백엔드에서 Firebase를 사용하여 이미지를 Storage에서 관리합니다.
  • 이미지 다운로드 기능→테스트를 설치할 때 발생합니다.
  • 발생 중인 문제


    그림을 다운로드하려면 왜 그림을 다운로드할 수 없습니까?
    콘솔을 확인한 결과 다음 오류가 발생했습니다.
  • 오류 내용
  • 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' ヘッダーが存在しません。
    
    모르는 단어가 몇 개 생겼는데, 우선 이 잘못된 해결 방법부터 시작한다.

    해결책

  • Cloud Storage 통의 CORS 구성 및 디버깅이 필요합니다.
  • 명령줄 도구를 사용하여 CORS를 구성하는 방법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
  • 용어


    이쪽 사이트는 매우 쉽게 귀결되기 때문에 제가 인용하도록 해 주십시오.
    https://qiita.com/att55/items/2154a8aad8bf1409db2b#사냥꾼자리

    XMLHttpRequest

  • 서버와의 상호 작용에 사용됩니다.
  • Ajax(비동기 통신)에 사용되는 포함 객체입니다.
  • 전체 페이지의 업데이트 없이 사용자의 작업을 중단하지 않고 일부분만 비동기적으로 업데이트할 수 있다.
  • CORS policy

  • Cross-Origin Resource Sharing(오리지널 리소스 공유)
  • 원시 장치로 실행되는 웹 응용 프로그램에 대해 원시 장치 간 HTTP 요청을 통해 다른 원시 장치의 서버에 접근할 수 있는 메커니즘
  • 오리온 자리

  • origin == protocol + domain + port number
  • 예: https://yahoo.co.jp:443
  • 이 사이트에는 간단하고 알기 쉬운 기록이 있다.제가 인용할 수 있도록 허락해 주십시오.

    Access-Control-Alow-Origin 머리글

  • http 제목의 매개 변수
  • 지정한 오리지널 요청 코드를 통해 응답을 공유할 수 있는지 표시합니다.
  •     Access-Control-Allow-Origin: *
    
  • 어댑터를 지정할 때 모든 사냥꾼자리를 허가할 수 있음
  • 사이트 축소판 그림


    https://firebase.google.com/docs/storage/web/download-files?hl=ja
    https://qiita.com/niusounds/items/383a780d46ee8551e98c
    https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest
    https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
    https://qiita.com/sirone/items/412b2a171dccb11e1bb6

    좋은 웹페이지 즐겨찾기