Firebase Storage и Access-Control-Allow-Origin

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

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

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

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 или хранилищу. Выберите необходимые параметры, например, чтение, запись, 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"
         ]
      }
  ]
}'

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

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

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