Esempi di configurazione CORS

Panoramica Configurazione

Questa pagina mostra configurazioni di esempio 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 presenti 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. Vuoi utilizzare l'immagine sul tuo sito web, quindi devi applicare una configurazione CORS su your-example-bucket che consenta ai browser dei tuoi utenti di richiedere risorse dal bucket. In base alla seguente configurazione, le richieste preflight sono valide per 1 ora e le richieste del browser riuscite restituiscono l'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 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 autenticato

Utilizza questa configurazione se la tua applicazione invia un token di autenticazione o un'intestazione di identitàGoogle 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 per più sottodomini corrispondenti

Utilizza questa configurazione se hai più ambienti di sviluppo o staging 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 per qualsiasi origine

Utilizza questa configurazione per i dati pubblici per i quali non è richiesta alcuna limitazione. Se specifichi il carattere jolly * come origine, le richieste sono consentite 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 comando gcloud storage buckets update --cors-file 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

Questa è 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