Firebase Storage e Access-Control-Allow-Origin

Estou tentando baixar arquivos do Firebase Storage por meio de um XMLHttpRequest, mas Access-Control-Allow-Origin não está definido no recurso, portanto, não é possível. Existe alguma maneira de definir este cabeçalho no servidor de armazenamento?

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

Mensagem de erro do Chrome:

XMLHttpRequest não pode carregar https://firebasestorage.googleapis.com/[EDITED] Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. Portanto, o acesso de origem ' http: // localhost: 3449 ' não é permitido.

Desta postagem no firebase-talk group / list :

A maneira mais fácil de configurar seus dados para CORS é com a gsutilferramenta de linha de comando. As instruções de instalação do gsutilestão disponíveis em https://cloud.google.com/storage/docs/gsutil_install . Depois de instalargsutil e autenticar com ele, você pode usá-lo para configurar o CORS.

Por exemplo, se você deseja apenas permitir downloads de objetos de seu domínio personalizado, coloque esses dados em um arquivo denominado cors.json (substituindo "https://example.com"por seu domínio):

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

Em seguida, execute este comando (substituindo "exampleproject.appspot.com"pelo nome do seu intervalo):

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

e você deve ser definido.

Se você precisar de uma configuração CORS mais complicada, verifique os documentos em https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket .

O Google Cloud agora tem um editor embutido para tornar esse processo ainda mais fácil. Não há necessidade de instalar nada em seu sistema local.

1. Abra o console do GCP e inicie uma sessão de terminal em nuvem clicando no botão do >_ícone na barra de navegação superior.
2. Clique no ícone de lápis para abrir o editor e, em seguida, crie o cors.jsonarquivo.
3. Corre gsutil cors set cors.json gs://your-bucket

Só quero acrescentar algo à resposta. Basta acessar seu projeto no console do google (console.cloud.google.com/home) e selecionar seu projeto. Aí abra o terminal e apenas crie o arquivo cors.json ( touch cors.json) e então siga a resposta e edite este arquivo ( vim cors.json) conforme sugerido por @ frank-van-puffelen

Isso funcionou para mim. Felicidades!

outra abordagem para fazer isso é usar a API JSON do Google. etapa 1: obter token de acesso para usar com a API JSON Para obter um token de uso, vá para: https://developers.google.com/oauthplayground/ Em seguida, pesquise por API JSON ou armazenamento Selecione as opções necessárias, ou seja, ler, gravar, full_access (marque essas que são obrigatórios) Siga o processo para obter o Token de Acesso, que será válido por uma hora. Etapa 2: use o token para acessar a API JSON do google para atualizar o CORS

Amostra de onda:

    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"
         ]
      }
  ]
}'

Gostaria de acrescentar para aqueles que precisam desesperadamente de uma solução como eu estava depois de tentar tudo isso e não resolver o problema. Encontrei um ótimo artigo online que oferece 3 soluções, e a primeira funcionou para mim .. um plugin do Google Chrome .. sim! ..

extensão moesif CORS Certifique-se de ligá-la após a instalação

Para acessar qualquer recurso com um cabeçalho CORS aplicado, você poderia usar um pequeno projeto que fiz em Golang para mim - https://proxify-cors.herokuapp.com/