Firebase Storage и Access-Control-Allow-Origin


86

Я пытаюсь загрузить файлы из хранилища Firebase через XMLHttpRequest, но 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 ' не разрешен доступ.


1
Недостаточно репутации для комментария, но приведенный выше способ все еще правильный. Просто хотел поделиться официальными документами по
firebase

Ответы:


172

Из этого сообщения в группе / списке 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 .


5
Есть ли способ разрешить все источники, аналогичные Access-Control-Allow-Origin: *?
dooderson

5
Как я могу найти точное имя моей корзины firebase?
Джим

11
@ user1311069 просто используйте "origin": ["*"],вместо"origin": ["https://example.com"],
rigdonmr

8
Firebase действительно нужно найти удобный для пользователя способ сделать это. Установка разрешений для реальной базы данных Firebase не так уж разочаровывает, как и установка разрешений для корзины S3. Сильное предпочтение S3 на данный момент.
Мэтт Дженсен

43
Если вы не хотите устанавливать утилиту, удобно перейти на console.cloud.google.com/home и нажать «Активировать Google Cloud Shell» в правом верхнем углу. Это откроет оболочку с уже установленным gsutil и доступом к вашим проектам хранилища firebase. (в оболочке я использовал pico для создания json, затем сделал, gsutil cors set myjson.json gs://projectname.appspot.comкак указано выше)
Eindbaas

47

В Google Cloud теперь есть встроенный редактор, чтобы сделать этот процесс еще проще. Не нужно ничего устанавливать в вашей локальной системе.

  1. Откройте консоль GCP и запустите сеанс облачного терминала, щелкнув >_значок на верхней панели навигации.
  2. Щелкните значок карандаша, чтобы открыть редактор, затем создайте cors.jsonфайл.
  3. Бегать gsutil cors set cors.json gs://your-bucket

введите описание изображения здесь


Застрял на шаге 1. Объясните, пожалуйста, «и запустите сеанс облачного терминала». Я открываю консоль и не вижу кнопки или ссылку на «начать сеанс облачного терминала»
фортесл

3
Это значок в правом верхнем углу навигации, который выглядит так>_
JeffD23

Есть ли прямой способ сначала вытащить существующую конфигурацию cors для возврата, если это необходимо?
Дэвид

Я пробовал это, но это не сработало.
user683742

У меня
сработало

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

Убедитесь, что вы находитесь в cloudсубдомене, а не в firebaseтом ("console.cloud.google.com/home"), и найдите >_кнопку со значком в правом верхнем углу.
Крис Вилла

1

другой подход к этому - использование Google JSON API. Шаг 1. Получите токен доступа для использования с JSON API. Чтобы использовать токен, перейдите по ссылке : https://developers.google.com/oauthplayground/. Затем выполните поиск по JSON API или хранилищу. Выберите необходимые параметры, например, чтение, запись, 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"
         ]
      }
  ]
}'

0

Я хотел бы добавить для тех, кто отчаянно нуждался в решении, как я пытался все это, но не решил проблему. Я нашел в Интернете отличную статью, предлагающую 3 решения, и первая сработала для меня ... плагин google chrome ... да! ..

moesif CORS extension Убедитесь, что после установки вы включили его


2
На самом деле это не решает проблему для неизвестного пользователя в поле - только для одной машины.
Elemental

0

Чтобы получить доступ к любому ресурсу с примененным заголовком CORS, вы можете использовать небольшой проект, который я сделал в Golang для себя - https://proxify-cors.herokuapp.com/

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.