Das [AWS SDK für JavaScript V3-API-Referenzhandbuch](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) beschreibt detailliert alle API-Operationen für die AWS SDK für JavaScript Version 3 (V3). 

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

# Überlegungen zum Browser-Skript
<a name="browser-js-considerations"></a>

In den folgenden Themen werden besondere Überlegungen zur Verwendung von AWS SDK für JavaScript In-Browser-Skripts beschrieben.

**Topics**
+ [Erstellen Sie das SDK für Browser](building-sdk-for-browsers.md)
+ [Cross-Origin Resource Sharing (CORS)](cors.md)
+ [Bündeln Sie Anwendungen mit Webpack](webpack.md)

# Erstellen Sie das SDK für Browser
<a name="building-sdk-for-browsers"></a>

Im Gegensatz zum SDK für JavaScript Version 2 (V2) wird V3 nicht als JavaScript Datei mit Unterstützung für eine Reihe von Standarddiensten bereitgestellt. Stattdessen können Sie mit V3 nur das SDK für die benötigten JavaScript Dateien bündeln und in den Browser aufnehmen, wodurch der Overhead reduziert wird. Wir empfehlen, Webpack zu verwenden, um das erforderliche SDK für JavaScript Dateien und alle zusätzlichen Pakete von Drittanbietern, die Sie benötigen, in einer einzigen `Javascript` Datei zu bündeln und diese mithilfe eines `<script>` Tags in Browserskripte zu laden. Weitere Informationen zu Webpack finden Sie unter. [Bündeln Sie Anwendungen mit Webpack](webpack.md) 

Wenn Sie mit dem SDK außerhalb einer Umgebung arbeiten, die CORS in Ihrem Browser erzwingt, und wenn Sie Zugriff auf alle vom SDK bereitgestellten Dienste für haben möchten JavaScript, können Sie lokal eine benutzerdefinierte Kopie des SDK erstellen, indem Sie das Repository klonen und dieselben Build-Tools ausführen, mit denen die gehostete Standardversion des SDK erstellt wird. In den folgenden Abschnitten werden die Schritte erklärt, anhand derer das SDK zusammen mit zusätzlichen Services und API-Versionen erstellt werden kann.

## Verwenden Sie den SDK Builder, um das SDK für zu erstellen JavaScript
<a name="using-the-sdk-builder"></a>

**Anmerkung**  
Amazon Web Services Version 3 (V3) unterstützt Browser Builder nicht mehr. Um die Bandbreitennutzung von Browseranwendungen zu minimieren, empfehlen wir Ihnen, benannte Module zu importieren und sie zu bündeln, um die Größe zu reduzieren. Weitere Informationen zur Bündelung finden Sie unter[Bündeln Sie Anwendungen mit Webpack](webpack.md).

# Cross-Origin Resource Sharing (CORS)
<a name="cors"></a>

Bei Cross-Origin Resource Sharing oder CORS handelt es sich um eine Sicherheitsfunktion der modernen Webbrowser. Es ermöglicht Webbrowsern zu verhandeln, welche Domänen Anforderungen von externen Websites oder Services senden können. 

CORS ist ein wichtiger Aspekt bei der Entwicklung von Browseranwendungen mit dem AWS SDK für JavaScript , da die meisten Anforderungen an Ressourcen an eine externe Domäne, wie z. B. der Endpunkt für einen Webservice, gesendet werden. Wenn in Ihrer JavaScript Umgebung die CORS-Sicherheit durchgesetzt wird, müssen Sie CORS mit dem Dienst konfigurieren.

CORS bestimmt auf der Grundlage der folgenden Kriterien, ob die gemeinsame Nutzung von Ressourcen in einer ursprungsübergreifenden Anfrage zulässig ist:
+ Der spezifischen Domäne, die die Anforderung sendet 
+ Dem Typ der HTTP-Anforderung, die gesendet wird (GET, PUT, POST, DELETE usw.)

## Wie funktioniert CORS
<a name="how-cors-works"></a>

Im einfachsten Fall sendet Ihr Browser-Skript eine GET-Anforderung für eine Ressource von einem Server in einer anderen Domäne. Abhängig von der CORS-Konfiguration dieses Servers, wenn die Anforderung von einer Domäne stammt, die berechtigt ist, GET-Anforderungen abzusenden, reagiert der ursprungsübergreifende Server, indem er die angeforderte Ressource zurück gibt.

Wenn entweder die anfordernde Domäne oder der Typ der HTTP-Anforderung nicht autorisiert ist, wird die Anforderung abgelehnt. CORS jedoch ermöglicht ein Preflight der Anforderung, bevor sie tatsächlich abgesendet wird. In diesem Fall wird eine Preflight-Anforderung ausgeführt, in der die `OPTIONS`-Zugriffsanforderungsoperation gesendet wird. Wenn die CORS-Konfiguration des ursprungsübergreifenden Servers Zugriff auf die anfordernde Domäne gewährt, sendet der Server eine Preflight-Antwort zurück, die alle HTTP-Anforderungstypen aufführt, die die anfordernde Domäne für die angeforderte Ressource vornehmen kann.

![\[Prozessablauf für CORS-Anforderungen\]](http://docs.aws.amazon.com/de_de/sdk-for-javascript/v3/developer-guide/images/cors-overview.png)


## Ist eine CORS-Konfiguration erforderlich?
<a name="the-need-for-cors-configuration"></a>

Amazon S3 S3-Buckets benötigen eine CORS-Konfiguration, bevor Sie Operationen mit ihnen ausführen können. In einigen JavaScript Umgebungen wird CORS möglicherweise nicht durchgesetzt, sodass die Konfiguration von CORS nicht erforderlich ist. Wenn Sie Ihre Anwendung beispielsweise von einem Amazon S3 S3-Bucket aus hosten und auf Ressourcen von `*.s3.amazonaws.com` oder einem anderen bestimmten Endpunkt zugreifen, greifen Ihre Anfragen nicht auf eine externe Domain zu. Aus diesem Grund benötigt diese Konfiguration kein CORS. In diesem Fall wird CORS weiterhin für andere Dienste als Amazon S3 verwendet.

## CORS für einen Amazon S3 S3-Bucket konfigurieren
<a name="configuring-cors-s3-bucket"></a>

Sie können einen Amazon S3 S3-Bucket für die Verwendung von CORS in der Amazon S3 S3-Konsole konfigurieren.

Wenn Sie CORS in der AWS Web Services Management Console konfigurieren, müssen Sie JSON verwenden, um eine CORS-Konfiguration zu erstellen. Die neue AWS Web Services Management Console unterstützt nur JSON-CORS-Konfigurationen. 

**Wichtig**  
In der neuen AWS Web Services Management Console muss die CORS-Konfiguration JSON sein.

1. Öffnen Sie in der AWS Web Services Management Console die Amazon S3 S3-Konsole, suchen Sie den Bucket, den Sie konfigurieren möchten, und aktivieren Sie das entsprechende Kontrollkästchen.

1. Wählen Sie in dem sich öffnenden Bereich **Permissions** aus.

1. Wählen Sie auf der Registerkarte **Permission** die Option **CORS-Konfiguration** aus.

1. **Geben Sie Ihre CORS-Konfiguration im **CORS-Konfigurationseditor** ein und wählen Sie dann Speichern.**

Eine CORS-Konfiguration ist eine XML-Datei mit einer Reihe von Regeln innerhalb eines `<CORSRule>`. Eine Konfiguration kann bis zu 100 Regeln enthalten. Eine Regel wird durch eines der folgenden Tags definiert:
+ `<AllowedOrigin>`— Gibt die Domain-Ursprünge an, die Sie für domänenübergreifende Anfragen zulassen.
+ `<AllowedMethod>`— Gibt einen Anfragetyp an, den Sie in domänenübergreifenden Anfragen zulassen (GET, PUT, POST, DELETE, HEAD).
+ `<AllowedHeader>`— Gibt die Header an, die in einer Preflight-Anfrage zulässig sind.

Beispielkonfigurationen finden Sie unter [Wie konfiguriere ich CORS in meinem](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html#how-do-i-enable-cors) Bucket? im *Amazon Simple Storage Service-Benutzerhandbuch*.

## Beispiel für eine CORS-Konfiguration
<a name="cors-configuration-example"></a>

Das folgende CORS-Konfigurationsbeispiel ermöglicht es einem Benutzer, Objekte innerhalb eines Buckets aus der Domain anzuzeigen, hinzuzufügen, zu entfernen oder zu aktualisieren. `example.org` Wir empfehlen jedoch, dass Sie den Bereich `<AllowedOrigin>` auf die Domain Ihrer Website beschränken. Sie können `"*"` angeben, sodass jeder Ursprung zulässig ist.

**Wichtig**  
In der neuen S3-Konsole muss die CORS-Konfiguration JSON sein.

------
#### [ XML ]

```
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>https://example.org</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
  </CORSRule>
</CORSConfiguration>
```

------
#### [ JSON ]

```
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://www.example.org"
        ],
        "ExposeHeaders": [
             "ETag",
             "x-amz-meta-custom-header"]
    }
]
```

------

Diese Konfiguration autorisiert den Benutzer nicht, Aktionen für den Bucket auszuführen. Es ermöglicht dem Sicherheitsmodell des Browsers, eine Anfrage an Amazon S3 zuzulassen. Berechtigungen müssen über Bucket-Berechtigungen oder IAM-Rollenberechtigungen konfiguriert werden.

Sie können `ExposeHeader` damit das SDK die von Amazon S3 zurückgegebenen Antwort-Header lesen lassen. Wenn Sie beispielsweise den `ETag` Header aus einem `PUT` oder einem mehrteiligen Upload lesen möchten, müssen Sie das `ExposeHeader` Tag in Ihre Konfiguration aufnehmen, wie im vorherigen Beispiel gezeigt. Das SDK kann nur auf Header zugreifen, die über die CORS-Konfiguration bereitgestellt werden. Wenn Sie Metadaten für das Objekt festlegen, werden Werte als Header mit dem Präfix `x-amz-meta-` zurückgegeben, wie z. B. `x-amz-meta-my-custom-header`, und müssen auch auf die gleiche Weise bereitgestellt werden.

# Bündeln Sie Anwendungen mit Webpack
<a name="webpack"></a>

Die Verwendung von Codemodulen durch Webanwendungen in Browserskripten oder Node.js erzeugt Abhängigkeiten. Diese Codemodule können eigene Abhängigkeiten haben, was zu einer Sammlung von miteinander verbundenen Modulen führt, die Ihre Anwendung benötigt, um zu funktionieren. Um Abhängigkeiten zu verwalten, können Sie einen Modul-Bundler wie `webpack` verwenden.

Der `webpack` Modul-Bundler analysiert Ihren Anwendungscode und sucht nach `import` `require` ODER-Anweisungen, um Bundles zu erstellen, die alle Ressourcen enthalten, die Ihre Anwendung benötigt. Auf diese Weise können die Ressourcen einfach über eine Webseite bereitgestellt werden. Das SDK für JavaScript kann `webpack` als eine der Abhängigkeiten in das Ausgabepaket aufgenommen werden.

Weitere Informationen zu `webpack` finden Sie im [Webpack-Modul-Bundler](https://webpack.github.io/) unter. GitHub

## Installieren Sie das Webpack
<a name="webpack-installing"></a>

Um den `webpack` Modul-Bundler zu installieren, müssen Sie zuerst npm, den Paketmanager Node.js, installiert haben. Geben Sie den folgenden Befehl ein, um die `webpack` CLI und das JavaScript Modul zu installieren.

```
npm install --save-dev webpack
```

Um das `path` Modul für die Arbeit mit Datei- und Verzeichnispfaden zu verwenden, das automatisch mit Webpack installiert wird, müssen Sie möglicherweise das `path-browserify` Paket Node.js installieren. 

```
npm install --save-dev path-browserify
```

## Webpack konfigurieren
<a name="webpack-configuring"></a>

Standardmäßig sucht Webpack nach einer JavaScript Datei mit dem Namen `webpack.config.js` im Stammverzeichnis Ihres Projekts. Diese Datei enthält Ihre Konfigurationsoptionen. Das Folgende ist ein Beispiel für eine `webpack.config.js` Konfigurationsdatei für WebPack Version 5.0.0 und höher.

**Anmerkung**  
Die Webpack-Konfigurationsanforderungen variieren je nach der Version von Webpack, die Sie installieren. Weitere Informationen finden Sie in der [Webpack-Dokumentation](https://webpack.js.org/configuration/). 

```
// Import path for resolving file paths
var path = require("path");
module.exports = {
  // Specify the entry point for our app.
  entry: [path.join(__dirname, "browser.js")],
  // Specify the output file containing our bundled code.
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
   // Enable WebPack to use the 'path' package.
   resolve:{
  fallback: { path: require.resolve("path-browserify")}
  }
  /**
  * In Webpack version v2.0.0 and earlier, you must tell 
  * webpack how to use "json-loader" to load 'json' files.
  * To do this Enter 'npm --save-dev install json-loader' at the 
  * command line to install the "json-loader' package, and include the 
  * following entry in your webpack.config.js.
  * module: {
    rules: [{test: /\.json$/, use: use: "json-loader"}]
  }
  **/
};
```

In diesem Beispiel `browser.js` wird als *Einstiegspunkt* angegeben. Der *Einstiegspunkt* wird von der Datei `webpack` verwendet, um mit der Suche nach importierten Modulen zu beginnen. Der Name für die Ausgabedatei ist als `bundle.js` angegeben. Diese Ausgabedatei enthält alles, was JavaScript die Anwendung zum Ausführen benötigt. Wenn der im Einstiegspunkt angegebene Code andere Module importiert oder benötigt, z. B. das SDK für JavaScript, wird dieser Code gebündelt, ohne dass er in der Konfiguration angegeben werden muss.

## Führen Sie Webpack aus
<a name="webpack-running"></a>

Um eine zu verwendende Anwendung zu erstellen`webpack`, fügen Sie dem `scripts` Objekt in Ihrer `package.json` Datei Folgendes hinzu.

```
"build": "webpack"
```

Im Folgenden finden Sie eine `package.json` Beispieldatei, die das Hinzufügen demonstriert`webpack`.

```
{
  "name": "aws-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@aws-sdk/client-iam": "^3.32.0",
    "@aws-sdk/client-s3": "^3.32.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0"
  }
}
```

Geben Sie den folgenden Befehl ein, um Ihre Anwendung zu erstellen.

```
npm run build
```

Der `webpack` Modul-Bundler generiert dann die JavaScript Datei, die Sie im Stammverzeichnis Ihres Projekts angegeben haben.

## Verwenden Sie das Webpack-Bundle
<a name="webpack-using-bundle"></a>

Um das Bundle in einem Browser-Skript zu verwenden, können Sie das Bundle mithilfe eines `<script>` Tags integrieren, wie im folgenden Beispiel gezeigt.

```
<!DOCTYPE html>
<html>
    <head>
        <title>Amazon SDK with webpack</title>
    </head> 
    <body>
        <div id="list"></div>
        <script src="bundle.js"></script>
    </body>
</html>
```

## Paket für Node.js
<a name="webpack-nodejs-bundles"></a>

Sie können `webpack` es verwenden, um Bundles zu generieren, die in Node.js ausgeführt werden, indem Sie es `node` als Ziel in der Konfiguration angeben.

```
target: "node"
```

Dies ist nützlich, wenn eine Node.js-Anwendung in einer Umgebung ausgeführt wird, in der Speicherplatz begrenzt ist. Hier sehen Sie ein Beispiel für eine `webpack.config.js`-Konfiguration mit der Angabe von Node.js als Ausgabeziel.

```
// Import path for resolving file paths
var path = require("path");
module.exports = {
  // Specify the entry point for our app.
  entry: [path.join(__dirname, "browser.js")],
  // Specify the output file containing our bundled code.
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  // Let webpack know to generate a Node.js bundle.
  target: "node",
   // Enable WebPack to use the 'path' package.
   resolve:{
  fallback: { path: require.resolve("path-browserify")}
   /**
   * In Webpack version v2.0.0 and earlier, you must tell 
   * webpack how to use "json-loader" to load 'json' files.
   * To do this Enter 'npm --save-dev install json-loader' at the 
   * command line to install the "json-loader' package, and include the 
   * following entry in your webpack.config.js.
   module: {
    rules: [{test: /\.json$/, use: use: "json-loader"}]
  }
  **/
};
```