Firebase 저장소 및 Access-Control-Allow-Origin


90

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 '는 액세스가 허용되지 않습니다.


1
댓글에 대한 담당자는 충분하지 않지만 위의 방법은 여전히 ​​옳습니다. 그냥이 일에 공식 중포 기지의 문서를 공유하고 싶었 : firebase.google.com/docs/storage/web/...
앤드류 McOlash

답변:


180

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

CORS 용 데이터를 구성하는 가장 쉬운 방법은 gsutil명령 줄 도구를 사용하는 것입니다. 에 대한 설치 지침 gsutilhttps://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 에서 문서를 확인하세요 .


5
Access-Control-Allow-Origin : *과 유사한 모든 출처를 허용하는 방법이 있습니까?
dooderson

5
내 firebase 버킷의 정확한 이름을 어떻게 찾을 수 있나요?
Jim

11
@ user1311069은 사용 "origin": ["*"],대신에"origin": ["https://example.com"],
rigdonmr

8
Firebase는이를 위해 사용자 친화적 인 방법을 찾아야합니다. 실제 Firebase 데이터베이스에 대한 권한을 설정하는 것이 그렇게 답답하지도 않고 S3 버킷 권한을 설정하는 것도 아닙니다. 이 시점에서 S3를 선호합니다.
Matt Jensen

44
유틸리티를 설치하지 않으려면 편리한 방법은 console.cloud.google.com/home 으로 이동하여 오른쪽 상단의 'Google Cloud Shell 활성화'를 클릭하는 것입니다. 그러면 gsutil이 이미 설치되어 있고 Firebase 저장소 프로젝트에 액세스 할 수있는 셸이 열립니다. (쉘에서 나는 않았다이어서, JSON을 만들 피코 사용 gsutil cors set myjson.json gs://projectname.appspot.com상술 한 바와 같이)
Eindbaas

62

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

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

여기에 이미지 설명 입력


1 단계에서
멈췄습니다.

3
오른쪽 상단 탐색에있는 아이콘은 다음과 같습니다.>_
JeffD23

필요한 경우 복귀를 위해 기존 cors 구성을 먼저 가져 오는 간단한 방법이 있습니까?
David

트릭을 했어! 감사합니다. 나는 그것이 아마도 규칙에 따라 firebase 저장소 자체에서 제어된다면 훨씬 더 간단 할 수 있다고 말해야합니다. #google #firebase 사용자 경험을 향상시킬 수있는 기회가 있습니다.
Rodrigo Rubio

1
@NickCarducci 당신이 옳을 수도 있고 나는 익명 시설을 정말 좋아하지만 메모리에서 천만이라는 하드 제한이 있다는 것을 걱정합니다. 예를 들어 아무도 로그인하거나 등록하지 않을 것으로 예상되는 TV 캠페인 용 웹 앱이있는 경우 위험 할 수 있습니다.
Rodrigo Rubio

18

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

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


console.cloud.google.com/home의 웹 콘솔에서 오류가 발생했지만 Google Cloud SDK Shell에서는 제대로 작동했습니다.
FiringBlanks

3
... 거기 터미널을 열고 ... 터미널을 어떻게 열지? 링크에 "단말기 열기"버튼이 보이지 않습니다
fortesl

1
cloud하위 도메인 firebase( "console.cloud.google.com/home")이 아닌 하위 도메인 에 있는지 확인 하고 >_오른쪽 상단에서 아이콘 버튼을 찾습니다 .
Chris Villa

1

이를위한 또 다른 접근 방식은 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"
         ]
      }
  ]
}'

0

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

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


2
이것은 현장에서 알려지지 않은 사용자의 문제를 실제로 해결하지 못합니다. 단 하나의 컴퓨터에서만 가능합니다.
Elemental

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.