CORS-Policies anwenden - Hetzner Docs

Um Cross-Origin-Anfragen an Ihren Bucket zu erlauben, können Sie CORS-Regeln festlegen. Weitere Informationen finden Sie in dem AWS Artikel über Cross-Origin Resource Sharing (CORS).

Die Befehle unterscheiden sich je nach S3-kompatiblem Tool. Die folgenden Schritte werden mittels Beispielbefehlen für AWS CLI und S3cmd erklärt. MinIO Client unterstützt aktuell (Ende 2024) weder PutBucketCors noch DeleteBucketCors, siehe diesen Artikel.

Im folgendem Beispiel wird gezeigt, wie Sie eine kleine Webseite einrichten, die auf einem Server gehostet wird und Daten von einem Bucket abruft. Dabei wird ein Bild über dessen direkte URL abgerufen. Weitere Daten werden aus einer JSON-Datei mithilfe von JavaScript abgerufen.

Beispiel-Webseite einrichten

Wenn Sie die Verbindung direkt über eine Beispiel-Webseite testen möchten, können Sie folgende Dateien verwenden:

Server

Installieren Sie auf dem Server einen Webserver (z.B. nginx) und erstellen Sie folgende Dateien:

/var/www/html/index.html

Ersetzen Sie <bucket_name> mit dem Namen Ihres Buckets.

<!DOCTYPE html>
<html lang="en">

<body>

  <h1>Daten von einem Bucket abrufen!</h1>
  <h2>Bild:</h2>
  <img src="https://<bucket_name>.fsn1.your-objectstorage.com/image.png" height="100" />
  <br><br>
  <h2>JavaScript:</h2>
  <div class="row" id="content-bucket">
  <!-- Dynamically populated -->
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="js/script.js"></script>

</body>
</html>

/var/www/html/js/script.js

Ersetzen Sie <bucket_name> mit dem Namen Ihres Buckets.

"use strict";

function listContent(content, contentBucket) {
  $(contentBucket).append(`
                        <h3>${content.title}</h3>
                        <p>${content.text}</p>
                      `);
}

$(document).ready(() => {
  let contentBucket = $('#content-bucket');

  $.getJSON("https://<bucket_name>.fsn1.your-objectstorage.com/data/content.json", contents => {
    contents.forEach(content => {
      listContent(content, contentBucket);
    });
  });
});

Bucket

Erstellen Sie die folgenden Dateien auf einem Gerät mit einem S3-kompatiblen API-Tool wie S3cmd:

content.json

[
    {
        "title": "TITLE 1",
        "text":"Text 1"
    },
    {
        "title": "TITLE 2",
        "text":"Text 2"
    }
]

image.png

wget -O image.png https://picsum.photos/200

Kopieren Sie die Dateien nun auf Ihren Bucket:

aws s3 cp content.json s3://<bucket_name>/data/content.json
aws s3 cp image.png s3://<bucket_name>/image.png

s3cmd put content.json s3://<bucket_name>/data/content.json
s3cmd put image.png s3://<bucket_name>/image.png

Bucket vorbereiten

Damit die CORS-Funktion fehlerfrei funktioniert, muss die Bucket-Sichtbarkeit auf "öffentlich" gesetzt werden. Um die Sichtbarkeit über die Cloud Console anzupassen, navigieren Sie zu Ihren Bucket und klicken Sie oben rechts auf "Aktionen". Klicken Sie anschließend auf "Bucket-Sichtbarkeit zurücksetzen" und setzen Sie die Sichtbarkeit auf "Öffentlich".

CORS-Konfiguration erstellen

Wenn Sie Ihre Webseite unter https://www.example.com aufrufen, sollten Sie bereits das Bild sehen, das aus dem Bucket abgerufen wird. Die Informationen, die über JavaScript abgerufen werden, sollte hingegen noch fehlen. In der Datei index.html wird direkt auf die Bild-URL verwiesen, weshalb dieses über eine einfache HTTP-GET-Anfrage abgerufen wird. Die Daten aus data/content.json werden hingegen über JavaScript abgerufen, das eine AJAX-Anfrage sendet. Da diese AJAX-Anfrage vom Browser an den Bucket gesendet wird (besitzen verschiedene Domains), wird sie als Cross-Origin-Anfrage angesehen.

In der CORS-Konfiguration eines Buckets können mehrere verschiedene Elemente definiert werden. Weitere Informationen finden Sie in dem AWS S3 Artikel "Elements of a CORS configuration".

Die folgenden beiden Beispiele erlauben alle GET und HEAD Requests, die von https://www.example.com eingehen.

Wählen Sie eine der beiden Optionen und erstellen Sie einen neue Datei.
- Für AWS CLI, z.B. example-cors.json
  
  Ersetzen Sie https://www.example.com mit Ihrer eigenen Domain.
```
{
  "CORSRules": [
    {
      "AllowedOrigins": ["https://www.example.com"],
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET", "HEAD"]
    }
  ]
}
```
- Für S3cmd, z.B. example-cors.xml
  
  Ersetzen Sie https://www.example.com mit Ihrer eigenen Domain.
```
<CORSConfiguration>
  <CORSRule>
    <AllowedHeaders>*</AllowedHeaders>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedOrigin>https://www.example.com</AllowedOrigin>
  </CORSRule>
</CORSConfiguration>
```

CORS-Konfiguration auf den Bucket anwenden

AWS CLI

aws s3api put-bucket-cors --bucket <bucket_name> --cors-configuration file://example-cors.json

S3cmd

s3cmd setcors example-cors.xml s3://<bucket_name>

CORS-Regeln anzeigen

AWS CLI

aws s3api get-bucket-cors --bucket <bucket_name>

S3cmd

s3cmd info s3://<bucket_name> | tail -n 3

Verbindung prüfen

curl \
  -i https://<bucket_name>.fsn1.your-objectstorage.com/image.png \
  -H "Access-Control-Request-Method: GET" \
  -H "Origin: https://www.example.com"

CORS-Regeln löschen

AWS CLI

aws s3api delete-bucket-cors --bucket <bucket_name>

S3cmd
```
s3cmd delcors s3://<bucket_name>
```

Auf Ihrer Webseite sollten nun auch Daten angezeigt werden, die über eine Cross-Origin-Anfrage abgerufen werden.

Nächste Schritte: