CORS-Konfigurationsbeispiele

Übersicht Einrichtung

Auf dieser Seite werden Beispielkonfigurationen für Cross-Origin Resource Sharing (CORS) gezeigt.

Wenn Sie eine CORS-Konfiguration für einen Bucket festlegen, lassen Sie Interaktionen zwischen Ressourcen aus unterschiedlichen Quellen zu. Normalerweise wird dies verhindert, um böswilliges Verhalten zu unterbinden. Informationen zum Strukturieren einer Anfrage, mit der eine CORS-Konfiguration für einen Bucket festgelegt oder bearbeitet wird, finden Sie in der Anleitung unter CORS verwenden.

Beachten Sie die folgenden zusätzlichen Ressourcen:

Grundlegende CORS-Konfiguration

Angenommen, Sie haben eine dynamische Website, die für Nutzer unter your-example-website.appspot.com zugänglich ist. Sie haben eine Bilddatei, die in einem Cloud Storage-Bucket namens your-example-bucket gehostet wird. Sie möchten die Schriftart auf Ihrer Website verwenden. Daher müssen Sie auf your-example-bucket eine CORS-Konfiguration anwenden, mit der die Browser Ihrer Nutzer Ressourcen aus dem Bucket anfordern können. Basierend auf der folgenden Konfiguration sind Preflight-Anfragen eine Stunde lang gültig und erfolgreiche Browseranfragen geben den Content-Type der Ressource in der Antwort zurück.

JSON API

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

XML API

<?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>

Direkte Dateiuploads (für Single-Page-Anwendungen)

Verwenden Sie diese Konfiguration, wenn Ihre Frontend-Anwendung Dateien direkt in einen Bucket hochladen muss, was einen PUT-Vorgang erfordert. Dies ist eine häufige Anforderung für Single-Page-Anwendungen, bei denen sich die Anwendungslogik im Browser des Nutzers und nicht auf einem Backend-Server befindet.

Beachten Sie, dass PUT-Anfragen immer eine Preflight-Prüfung auslösen.

JSON API

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

XML API

<?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>

Clientseitiges Codebeispiel

JavaScript

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

Authentifizierter Datenzugriff

Verwenden Sie diese Konfiguration, wenn Ihre Anwendung ein Inhabertoken oder einenGoogle -Identitätsheader sendet, um auf geschützte (nicht öffentliche) Objekte zuzugreifen.

JSON API

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

XML API

<?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>

Zugriff für mehrere übereinstimmende Subdomains zulassen

Verwenden Sie diese Konfiguration, wenn Sie mehrere Entwicklungs- oder Staging-Umgebungen haben, die Zugriff auf denselben Bucket benötigen. Wenn Sie beim Angeben einer Subdomain den Platzhalter * verwenden, können Sie mehrere Subdomains abgleichen. Beispielsweise kann *.example.com verwendet werden, um test.example.com und prod.example.com abzugleichen.

JSON API

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

XML API

<?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>

Zugriff für alle Ursprünge zulassen

Verwenden Sie diese Konfiguration für öffentlich zugängliche Daten, bei denen keine Einschränkung erforderlich ist. Wenn Sie den Platzhalter * als Ursprung angeben, sind Anfragen von jedem Ursprung zulässig. Beachten Sie, dass bei dieser Konfiguration Anfragen an den Bucket fehlschlagen, wenn der Client credentials: include in seiner Anfrage festlegt.

JSON API

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

XML API

<?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>

CORS-Konfigurationsstruktur für die gcloud CLI

Der Befehl gcloud storage buckets update --cors-file erwartet eine Datei, die nur die Liste der CORS-Regeln enthält. Wenn Sie eine CORS-Konfiguration angeben, die mit der Google Cloud CLI festgelegt werden soll, entfernen Sie den übergeordneten "cors":-Wrapper aus der JSON-Datei.

Mit dem folgenden gcloud CLI-Befehl wird beispielsweise eine CORS-Konfiguration für einen Bucket festgelegt:

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

Dies ist eine Beispielkonfiguration für example_cors_file.json, die die richtige Struktur für den Befehl gcloud storage buckets update --cors-file verwendet.

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

Nächste Schritte