Firebase Storage e Access-Control-Allow-Origin

Sto tentando di scaricare file da Firebase Storage tramite XMLHttpRequest, ma Access-Control-Allow-Origin non è impostato sulla risorsa, quindi non è possibile. C'è un modo per impostare questa intestazione sul server di archiviazione?

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

Messaggio di errore di Chrome:

XMLHttpRequest non può caricare https://firebasestorage.googleapis.com/[EDITED] Nessuna intestazione "Access-Control-Allow-Origin" è presente sulla risorsa richiesta. L'accesso all'origine " http: // localhost: 3449 " non è pertanto consentito.

Da questo post nell'elenco / gruppo di discussione di Firebase :

Il modo più semplice per configurare i dati per CORS è con lo gsutilstrumento della riga di comando. Le istruzioni di installazione per gsutilsono disponibili su https://cloud.google.com/storage/docs/gsutil_install . Una volta installato gsutile autenticato con esso, puoi usarlo per configurare CORS.

Ad esempio, se desideri solo consentire il download di oggetti dal tuo dominio personalizzato, inserisci questi dati in un file denominato cors.json (sostituendolo "https://example.com"con il tuo dominio):

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

Quindi, esegui questo comando (sostituendolo "exampleproject.appspot.com"con il nome del tuo bucket):

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

e dovresti essere pronto.

Se hai bisogno di una configurazione CORS più complicata, controlla i documenti su https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket .

Google Cloud ora dispone di un editor in linea per rendere questo processo ancora più semplice. Non è necessario installare nulla sul tuo sistema locale.

1. Apri la console GCP e avvia una sessione di terminale cloud facendo clic sul >_pulsante icona nella barra di navigazione in alto.
2. Fare clic sull'icona della matita per aprire l'editor, quindi creare il cors.jsonfile.
3. Correre gsutil cors set cors.json gs://your-bucket

Voglio solo aggiungere alla risposta. Vai al tuo progetto nella console di Google (console.cloud.google.com/home) e seleziona il tuo progetto. Lì apri il terminale e crea il file cors.json ( touch cors.json), quindi segui la risposta e modifica questo file ( vim cors.json) come suggerito da @ frank-van-puffelen

Questo ha funzionato per me. Saluti!

un altro approccio per farlo è utilizzare l'API JSON di Google. passaggio 1: ottieni il token di accesso da utilizzare con l'API JSON Per ottenere un token da utilizzare vai su: https://developers.google.com/oauthplayground/ Quindi cerca l'API JSON o lo spazio di archiviazione Seleziona le opzioni richieste, ad esempio leggi, scrivi, full_access (seleziona quelle che sono obbligatori) Segui la procedura per ottenere il token di accesso, che sarà valido per un'ora. Passaggio 2: utilizza il token per raggiungere l'API JSON di Google per aggiornare CORS

Ricciolo campione:

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

Vorrei aggiungere per chi ha un disperato bisogno di una soluzione come me dopo aver provato tutto questo e non aver risolto il problema. Ho trovato un ottimo articolo online che offre 3 soluzioni, e il primo ha funzionato per me .. un plug-in di Google Chrome .. yeap! ..

moesif CORS extension Assicurati di averla attivata dopo l'installazione

Per accedere a qualsiasi risorsa con un'intestazione CORS applicata, puoi utilizzare un piccolo progetto che ho realizzato a Golang per me stesso: https://proxify-cors.herokuapp.com/