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.

Beachten Sie die folgenden zusätzlichen Hilfeseiten:

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 Datei-Uploads (für Single-Page-Anwendungen)

Verwenden Sie diese Konfiguration, wenn Ihre Front-End-Anwendung Dateien direkt in einen Bucket hochladen muss. Dazu ist ein PUT-Vorgang erforderlich. Dies ist häufig bei Single-Page-Anwendungen der Fall, bei denen sich die Anwendungslogik im Browser des Nutzers und nicht auf einem Back-End-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 einen Google Identity-Header 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 Stagingumgebungen haben, die Zugriff auf denselben Bucket benötigen. Wenn Sie bei der Angabe 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 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. Beachten Sie, dass Anfragen an den Bucket mit dieser Konfiguration 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>

Struktur der CORS-Konfiguration für die gcloud CLI

Der gcloud storage buckets update --cors-file Befehl 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 Wrapper der obersten Ebene"cors": 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 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