source

Firebase 스토리지 및 액세스 제어 - 오리진 허용

manysource 2023. 6. 14. 21:55

Firebase 스토리지 및 액세스 제어 - 오리진 허용

XMLHttpRequest를 통해 Firebase Storage에서 파일을 다운로드하려고 하는데 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/ [EDITED] 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'http://localhost:3449'에 액세스할 수 없습니다.

파이어베이스 토크 그룹/목록의 게시물에서:

은 CORS를 하는 입니다.gsutil명줄 도설. 지침에 대한 :gsutil는 https://cloud.google.com/storage/docs/gsutil_install 에서 이용할 수 있습니다.설치한 후gsutil인증을 받으면 이를 사용하여 CORS를 구성할 수 있습니다.

지정 다운로드를 이cors.cors.json(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 에서 문서를 확인하십시오.

위의 내용은 이제 CORS 구성에 대한 Firebase 문서에도 포함되어 있습니다.

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

  1. GCP 콘솔을 열고 다음을 클릭하여 클라우드 터미널 세션을 시작합니다.>_아이콘 버튼을 클릭합니다.또는 검색란에서 "클라우드 셸 편집기"를 검색합니다.
  2. 편집기를 .cors.jsonjava.
  3. 려달을 합니다.gsutil cors set cors.json gs://your-bucket

enter image description here

답에 추가하고 싶을 뿐입니다.구글 콘솔(console.cloud.google.com/home) 에서 프로젝트를 선택하기만 하면 됩니다. 파일cors.json 파일)을하면 됩니다.touch cors.json을 선택한 후 이합니다.vim cors.json) @ @frank-van-flamelen에 의해

이것은 저에게 효과가 있었습니다.건배!

저는 Firebase 스토리지를 사용하여 프로젝트를 진행하고 있으며 최종 사용자가 업로드한 파일을 다운로드할 수 있는 방법이 필요합니다.사용자가 파일을 다운로드하려고 했을 때 저는 코르스 오류를 얻었지만, 조사한 후 문제를 해결했습니다.제가 알아낸 방법은 다음과 같습니다.

  1. Google 클라우드 CLI 다운로드
  2. CLI를 사용하여 로그인
  3. 프로젝트 디렉토리에 cors.json 파일을 생성하고 아래에 코드를 입력합니다.
[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]
  1. Google Cloud CLI를 사용하여 cors.json이 포함된 디렉토리로 이동합니다.
  2. CLI에 다음을 입력합니다.gsutil cors set cors.json gs://<app_name>.appspot.com

이를 위한 또 다른 접근 방식은 Google JSON API를 사용하는 것입니다.1단계: JSON API와 함께 사용할 액세스 토큰 가져오기 토큰 사용 방법은 다음으로 이동하십시오. https://developers.google.com/oauthplayground/ 그런 다음 JSON API 또는 스토리지를 검색합니다. 필요한 옵션을 선택합니다. read, write, full_access(필요한 옵션 선택) 프로세스에 따라 액세스 토큰을 가져오십시오. 이 옵션은 한 시간 동안 유효합니다.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"
         ]
      }
  ]
}'

언급URL : https://stackoverflow.com/questions/37760695/firebase-storage-and-access-control-allow-origin