[firebase] Firebase 저장소 및 Access-Control-Allow-Origin

Program / 글쓴이

XMLHttpRequest를 통해 Firebase 저장소에서 파일을 다운로드하려고하는데 Access-Control-Allow-Origin이 리소스에 설정되어 있지 않아 불가능합니다. 스토리지 서버에이 헤더를 설정하는 방법이 있습니까?

  (let [xhr (js/XMLHttpRequest.)]
    (.open xhr "GET" url)
    (aset xhr "responseType" "arraybuffer")
    (aset xhr "onload" #(js/console.log "bin" (.-response xhr)))
    (.send xhr)))

Chrome 오류 메시지 :

XMLHttpRequest에서 https://firebasestorage.googleapis.com/ [편집 됨]을 로드 할 수 없습니다

. 요청 된 리소스에 ‘Access-Control-Allow-Origin’헤더가 없습니다. 따라서 원본 ‘ http : // localhost : 3449 ‘는 액세스가 허용되지 않습니다.

답변

firebase-talk 그룹 / 목록에 대한 이 게시물에서 :

CORS 용 데이터를 구성하는 가장 쉬운 방법은 gsutil명령 줄 도구를 사용하는 것입니다. 에 대한 설치 지침 gsutil은 https://cloud.google.com/storage/docs/gsutil_install 에서 확인할 수 있습니다 . 설치 gsutil하고 인증 한 후에는 CORS를 구성하는 데 사용할 수 있습니다.

예를 들어 사용자 지정 도메인에서 개체 다운로드 만 허용하려면이 데이터를 cors.json이라는 파일에 넣습니다 ( "https://example.com"사용자의 도메인으로 대체 ).

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

그런 다음이 명령을 실행합니다 ( "exampleproject.appspot.com"버킷 이름으로 대체 ).

gsutil cors set cors.json gs://exampleproject.appspot.com

그리고 당신은 설정되어야합니다.

더 복잡한 CORS 구성이 필요한 경우 https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket 에서 문서를 확인하세요 .

답변

이제 GCP에는이 프로세스를 더욱 쉽게 만들어주는 인라인 편집기가 있습니다. 로컬 시스템에 아무것도 설치할 필요가 없습니다.

  1. GCP 콘솔을 열고 >_상단 탐색 모음에서 아이콘 버튼 을 클릭하여 클라우드 터미널 세션을 시작합니다 .
  2. 연필 아이콘을 클릭하여 편집기를 연 다음 cors.json파일 을 만듭니다 .
  3. 운영 gsutil cors set cors.json gs://your-bucket

여기에 이미지 설명 입력

답변

대답에 추가하고 싶습니다. Google 콘솔 (console.cloud.google.com/home)의 프로젝트로 이동하여 프로젝트를 선택하면됩니다. 거기에서 터미널을 열고 cors.json 파일 ( touch cors.json)을 만든 다음 대답을 따라이 파일 ( ) vim cors.json을 @ frank-van-puffelen이 제안한대로 편집합니다.

이것은 나를 위해 일했습니다. 건배!

답변

이를위한 또 다른 접근 방식은 Google JSON API를 사용하는 것입니다. 1 단계 : JSON API와 함께 사용할 액세스 토큰 가져 오기 토큰 사용을 얻으려면
다음으로 이동하십시오. https://developers.google.com/oauthplayground/ 그런 다음 JSON API 또는 저장소 검색 필수 옵션 (예 : 읽기, 쓰기, 전체 액세스 필요한 것) 프로세스에 따라 액세스 토큰을 받으십시오.이 토큰은 1 시간 동안 유효합니다. 2 단계 : 토큰을 사용하여 Google JSON API를 사용하여 CORS 업데이트

샘플 컬 : 

    curl -X PATCH \
  'https://www.googleapis.com/storage/v1/b/your_bucket_id?fields=cors' \
  -H 'Accept: application/json' \
  -H 'Accept-Encoding: gzip, deflate' \
  -H 'Authorization: Bearer ya29.GltIB3rTqQ2tJgh0cMj1SEa1UgQNJnTMXUjMlMIRGG-mBCbiUO0wqdDuEpnPD6cbkcr1CuLItuhaNCTJYhv2ZKjK7yqyIHNgkCBup-T8Z1B1RiBrCgcgliHOGFDz' \
  -H 'Content-Type: application/json' \
  -H 'Postman-Token: d19f29ed-2e80-4c34-85ee-c46c9058fac0' \
  -H 'cache-control: no-cache' \
  -d '{
  "location": "us",
  "storageClass": "Standard",
  "cors": [
      {
          "maxAgeSeconds": "360000000",
          "method": [
             "GET",
             "HEAD",
             "DELETE"
          ],
          "origin": [
             "*"
          ],
          "responseHeader":[
            "Content-Type"
         ]
      }
  ]
}'

답변

이 모든 것을 시도하고 문제를 해결하지 못한 것처럼 해결책이 절실히 필요한 사람들을 위해 추가하고 싶습니다. 온라인에서 3 가지 솔루션을 제공하는 훌륭한 기사를 찾았습니다. 첫 번째는 저에게 도움이되었습니다. .. google chrome plugin .. yeap! ..

moesif CORS 확장
설치 후 반드시 켜십시오.

답변

CORS 헤더가 적용된 리소스에 액세스하려면 Golang에서 만든 작은 프로젝트 ( https://proxify-cors.herokuapp.com/)를 사용할 수 있습니다.

답변