Esempi di configurazione CORS

Panoramica della configurazione

Questa pagina mostra esempi di configurazioni per la condivisione delle risorse tra origini (CORS).

Quando imposti una configurazione CORS su un bucket, consenti le interazioni tra risorse di origini diverse, normalmente vietate per impedire comportamenti dannosi. Per scoprire come strutturare una richiesta che imposta o modifica una configurazione CORS su un bucket, consulta le istruzioni in Utilizzo di CORS.

Tieni presente le seguenti risorse aggiuntive:

Configurazione CORS di base

Supponiamo che tu abbia un sito web dinamico a cui gli utenti possono accedere all'indirizzo your-example-website.appspot.com. Hai un file immagine ospitato in un bucket Cloud Storage denominato your-example-bucket. Vorresti utilizzare l'immagine sul tuo sito web, quindi devi applicare una configurazione CORS a your-example-bucket che consenta ai browser degli utenti di richiedere risorse dal bucket. In base alla seguente configurazione, le richieste preliminari sono valide per 1 ora e le richieste del browser riuscite restituiscono il Content-Type della risorsa nella risposta.

API JSON

{
  "cors": [
    {
      "origin": ["https://your-example-website.appspot.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
  ]
}

API XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://your-example-website.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Caricamenti diretti di file (per applicazioni a pagina singola)

Utilizza questa configurazione quando l'applicazione frontend deve caricare i file direttamente in un bucket, il che richiede un'operazione PUT. Si tratta di un'esigenza comune per le applicazioni a pagina singola, in cui la logica dell'applicazione risiede nel browser dell'utente anziché in un server di backend.

Tieni presente che le richieste PUT attivano sempre un controllo preliminare.

API JSON

{
 "cors": [
    {
        "origin": ["https://www.example-website.appspot.com"],
        "method": ["PUT", "POST", "OPTIONS"],
        "responseHeader": ["Content-Type", "x-goog-resumable"],
        "maxAgeSeconds": 3600
      }
  ]
}

API XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://your-example-website.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>PUT</Method>
      <Method>POST</Method>
      <Method>OPTIONS</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
      <ResponseHeader>x-goog-resumable</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Esempio di codice lato client

JavaScript

// Uploading a file using a Signed URL or direct PUT
await fetch(gcsSignedUrl, {
  method: 'PUT',
  body: fileBlob,
  headers: {
    'Content-Type': 'application/pdf'
  }
});

Accesso ai dati autenticati

Utilizza questa configurazione se la tua applicazione invia un token di autenticazione o un' Google intestazione Identity per accedere a oggetti protetti (non pubblici).

API JSON

{
 "cors": [
    {
        "origin": ["https://www.example-secure-app.appspot.com"],
        "method": ["GET", "HEAD"],
        "responseHeader": ["Authorization", "Content-Type"],
        "maxAgeSeconds": 3600
      }
  ]
}

API XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://www.example-secure-app.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>HEAD</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Authorization</ResponseHeader>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Consentire l'accesso a più sottodomini corrispondenti

Utilizza questa configurazione se hai più ambienti di sviluppo o di gestione temporanea che devono accedere allo stesso bucket. L'utilizzo del carattere jolly * quando specifichi un sottodominio ti consente di trovare corrispondenze con più sottodomini. Ad esempio, *.example.com può essere utilizzato per trovare corrispondenze con test.example.com e prod.example.com.

API JSON

{
 "cors": [
    {
        "origin": ["https://*.example.com"],
        "method": ["GET", "POST", "OPTIONS"],
        "responseHeader": ["Content-Type", "x-goog-resumable"],
        "maxAgeSeconds": 3600
      }
  ]
}

API XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://*.example.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>POST</Method>
      <Method>OPTIONS</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
      <ResponseHeader>x-goog-resumable</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Consentire l'accesso a qualsiasi origine

Utilizza questa configurazione per i dati pubblici in cui non è richiesta alcuna limitazione. Se specifichi il carattere jolly * come origine, le richieste possono provenire da qualsiasi origine. Tieni presente che con questa configurazione le richieste al bucket non andranno a buon fine se il client imposta credentials: include nella richiesta.

API JSON

{
 "cors": [
    {
        "origin": ["*"],
        "method": ["GET"],
        "responseHeader": ["Content-Type"],
        "maxAgeSeconds": 1800
      }
  ]
}

API XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>*</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>1800</MaxAgeSec>
  </Cors>
</CorsConfig>

Struttura della configurazione CORS per gcloud CLI

Il gcloud storage buckets update --cors-file comando prevede un file contenente solo l'elenco delle regole CORS. Quando specifichi una configurazione CORS da impostare utilizzando Google Cloud CLI, rimuovi il wrapper"cors": di primo livello dal file JSON.

Ad esempio, questo comando gcloud CLI imposta una configurazione CORS su un bucket:

gcloud storage buckets update gs://example_bucket --cors-file=example_cors_file.json

Di seguito è riportata una configurazione di esempio per example_cors_file.json che utilizza la struttura corretta per il comando gcloud storage buckets update --cors-file.

[
    {
      "origin": ["https://your-example-website.appspot.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

Passaggi successivi