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, ermöglichen Sie Interaktionen zwischen Ressourcen aus unterschiedlichen Quellen. 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 unter CORS verwenden.

Weitere 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 einseitige Web-Apps)

Verwenden Sie diese Konfiguration, wenn Ihre Frontend-Anwendung Dateien direkt in einen Bucket hochladen muss, was einen PUT-Vorgang erfordert. Dies ist ein häufiger Bedarf 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>

Beispiel für clientseitigen Code

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 Bearertoken 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 erlauben

Verwenden Sie diese Konfiguration, wenn Sie mehrere Entwicklungs- oder Staging-Umgebungen haben, die auf denselben Bucket zugreifen müssen. Wenn Sie bei der Angabe einer Subdomain den Platzhalter * verwenden, können Sie mehrere Subdomains abgleichen. So kann *.example.com beispielsweise 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 jeden Ursprung zulassen

Verwenden Sie diese Konfiguration für öffentlich zugängliche Daten, für die keine Einschränkung erforderlich ist. Wenn Sie den Platzhalter * als Ursprung angeben, sind Anfragen von jedem Ursprung zulässig. Hinweis: Bei dieser Konfiguration schlagen Anfragen an den Bucket fehl, 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>

Struktur der CORS-Konfiguration für die gcloud CLI

Für den Befehl gcloud storage buckets update --cors-file ist eine Datei mit nur der Liste der CORS-Regeln erforderlich. Wenn Sie eine CORS-Konfiguration angeben, die mit der Google Cloud CLI festgelegt werden soll, entfernen Sie den Wrapper "cors": der obersten Ebene aus der JSON-Datei.

Mit diesem 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 ein Beispiel für eine Konfiguration für example_cors_file.json, in der die richtige Struktur für den gcloud storage buckets update --cors-file-Befehl verwendet wird.

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

Nächste Schritte