Le [guide de référence de l'API AWS SDK pour JavaScript V3](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) décrit en détail toutes les opérations de l'API pour la AWS SDK pour JavaScript version 3 (V3). 

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Considérations à propos des scripts du navigateur
<a name="browser-js-considerations"></a>

Les rubriques suivantes décrivent les considérations particulières relatives à l'utilisation des scripts AWS SDK pour JavaScript dans le navigateur.

**Topics**
+ [Créez le SDK pour les navigateurs](building-sdk-for-browsers.md)
+ [Partage des ressources cross-origin (CORS)](cors.md)
+ [Regroupez des applications avec Webpack](webpack.md)

# Créez le SDK pour les navigateurs
<a name="building-sdk-for-browsers"></a>

Contrairement au SDK pour JavaScript la version 2 (V2), la version 3 n'est pas fournie sous forme de JavaScript fichier avec prise en charge d'un ensemble de services par défaut. Au lieu de cela, la V3 vous permet de regrouper et d'inclure dans le navigateur uniquement le SDK pour les JavaScript fichiers dont vous avez besoin, ce qui réduit les frais de gestion. Nous vous recommandons d'utiliser Webpack pour regrouper le SDK requis pour JavaScript les fichiers, ainsi que tous les packages tiers supplémentaires dont vous avez besoin, dans un seul `Javascript` fichier, et le charger dans des scripts de navigateur à l'aide d'une `<script>` balise. Pour plus d'informations sur Webpack, consultez[Regroupez des applications avec Webpack](webpack.md). 

Si vous travaillez avec le SDK en dehors d'un environnement qui applique CORS dans votre navigateur et si vous souhaitez accéder à tous les services fournis par le SDK pour JavaScript, vous pouvez créer une copie personnalisée du SDK localement en clonant le référentiel et en exécutant les mêmes outils de génération que ceux utilisés pour créer la version hébergée par défaut du SDK. Les sections suivantes décrivent les étapes à suivre pour créer le kit SDK avec des services et des versions d'API supplémentaires.

## Utilisez le SDK Builder pour créer le SDK pour JavaScript
<a name="using-the-sdk-builder"></a>

**Note**  
La version 3 (V3) d'Amazon Web Services ne prend plus en charge Browser Builder. Pour minimiser l'utilisation de la bande passante par les applications du navigateur, nous vous recommandons d'importer des modules nommés et de les regrouper afin de réduire leur taille. Pour plus d'informations sur le regroupement, consultez[Regroupez des applications avec Webpack](webpack.md).

# Partage des ressources cross-origin (CORS)
<a name="cors"></a>

Le partage des ressources cross-origin, ou CORS, est une fonctionnalité de sécurité des navigateurs web modernes. Elle permet aux navigateurs web de négocier les domaines pouvant effectuer des demandes de sites web ou services externes. 

CORS est une fonction importante à prendre en considération lors du développement des applications de navigateur avec le kit AWS SDK pour JavaScript , car la plupart des demandes de ressources sont envoyées à un domaine externe, tel que le point de terminaison d'un service web. Si votre JavaScript environnement applique la sécurité CORS, vous devez configurer CORS avec le service.

CORS détermine s'il convient d'autoriser le partage de ressources dans une demande d'origine croisée sur la base des éléments suivants :
+ Le domaine spécifique qui effectue la demande 
+ Le type de demande HTTP effectuée (GET, PUT, POST, DELETE, etc.)

## Comment fonctionne CORS
<a name="how-cors-works"></a>

Dans le cas le plus simple, votre script de navigateur effectue une demande GET pour une ressource à partir d'un serveur appartenant à un autre domaine. Selon la configuration CORS de ce serveur, si la demande provient d'un domaine qui est autorisé à soumettre des demandes GET, le serveur cross-origin répond en retournant la ressource demandée.

Si le domaine effectuant la demande ou si le type de demande HTTP n'est pas autorisé, la demande est refusée. Toutefois, CORS permet de vérifier la demande en amont avant de la soumettre. Dans ce cas, une demande en amont est effectuée. Cette demande inclut l'envoi de l'opération de demande d'accès `OPTIONS`. Si la configuration de la fonction CORS du serveur cross-origin accorde l'accès au domaine demandeur, le serveur renvoie une réponse en amont qui répertorie tous les types de requête HTTP que le domaine demandeur peut faire sur la ressource demandée.

![\[Flux de processus pour les demandes CORS\]](http://docs.aws.amazon.com/fr_fr/sdk-for-javascript/v3/developer-guide/images/cors-overview.png)


## La configuration CORS est-elle requise ?
<a name="the-need-for-cors-configuration"></a>

Les compartiments Amazon S3 nécessitent une configuration CORS avant que vous puissiez effectuer des opérations sur ceux-ci. Dans certains JavaScript environnements, le CORS peut ne pas être appliqué et sa configuration n'est donc pas nécessaire. Par exemple, si vous hébergez votre application à partir d'un compartiment Amazon S3 et que vous accédez à des ressources depuis un point de terminaison spécifique `*.s3.amazonaws.com` ou depuis un autre point de terminaison spécifique, vos demandes n'accèderont pas à un domaine externe. Par conséquent, cette configuration n'exige pas CORS. Dans ce cas, CORS est toujours utilisé pour des services autres qu'Amazon S3.

## Configurer CORS pour un compartiment Amazon S3
<a name="configuring-cors-s3-bucket"></a>

Vous pouvez configurer un compartiment Amazon S3 pour utiliser CORS dans la console Amazon S3.

Si vous configurez CORS dans la console de gestion des services AWS Web, vous devez utiliser JSON pour créer une configuration CORS. La nouvelle console de gestion des services AWS Web prend uniquement en charge les configurations JSON CORS. 

**Important**  
Dans la nouvelle console de gestion des services AWS Web, la configuration CORS doit être JSON.

1. Dans la console de gestion des services AWS Web, ouvrez la console Amazon S3, recherchez le compartiment que vous souhaitez configurer et cochez sa case.

1. Dans le volet qui s'ouvre, choisissez **Permissions**.

1. Dans l'onglet **Autorisation**, choisissez **Configuration CORS.**

1. **Entrez votre configuration CORS dans l'**éditeur de configuration CORS**, puis choisissez Enregistrer.**

Une configuration CORS est un fichier XML qui contient une série de règles au sein d'un élément `<CORSRule>`. Une configuration peut contenir jusqu'à 100 règles. Une règle est définie par l'une des balises suivantes :
+ `<AllowedOrigin>`— Spécifie les origines de domaines que vous autorisez à effectuer des demandes entre domaines.
+ `<AllowedMethod>`— Spécifie le type de demande que vous autorisez (GET, PUT, POST, DELETE, HEAD) dans les requêtes interdomaines.
+ `<AllowedHeader>`— Spécifie les en-têtes autorisés dans une demande de prévol.

Pour des exemples de configurations, voir [Comment configurer CORS sur mon bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html#how-do-i-enable-cors) ? dans le *guide de l'utilisateur d'Amazon Simple Storage Service*.

## Exemple de configuration CORS
<a name="cors-configuration-example"></a>

L'exemple de configuration CORS suivant permet à un utilisateur de visualiser, d'ajouter, de supprimer ou de mettre à jour des objets à l'intérieur d'un compartiment du domaine`example.org`. Cependant, nous vous recommandons de `<AllowedOrigin>` définir le domaine de votre site Web. Vous pouvez spécifier `"*"` pour autoriser n'importe quelle origine.

**Important**  
Dans la nouvelle console S3, la configuration CORS doit être de type JSON.

------
#### [ 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"]
    }
]
```

------

Cette configuration n'autorise pas l'utilisateur à effectuer des actions sur le compartiment. Il active le modèle de sécurité du navigateur pour autoriser une demande à Amazon S3. Les autorisations doivent être configurées via des autorisations de compartiment ou des autorisations de rôle IAM.

Vous pouvez l'utiliser `ExposeHeader` pour permettre au SDK de lire les en-têtes de réponse renvoyés par Amazon S3. Par exemple, si vous lisez l'`ETag`en-tête d'un téléchargement partitionné `PUT` ou partiel, vous devez inclure la `ExposeHeader` balise dans votre configuration, comme indiqué dans l'exemple précédent. Le kit SDK ne peut accéder qu'aux en-têtes qui sont exposés via la configuration CORS. Si vous définissez des métadonnées sur l'objet, les valeurs sont renvoyées sous forme d'en-têtes avec le préfixe `x-amz-meta-`, comme `x-amz-meta-my-custom-header` par exemple, et doivent également être exposées de la même manière.

# Regroupez des applications avec Webpack
<a name="webpack"></a>

L'utilisation de modules de code par des applications Web dans des scripts de navigateur ou dans Node.js crée des dépendances. Ces modules de code peuvent avoir leurs propres dépendances, ce qui se traduit par un ensemble de modules interconnectés nécessaires à votre application pour fonctionner. Pour gérer les dépendances, vous pouvez utiliser un bundler de modules tel que`webpack`.

Le `webpack` module bundler analyse le code de votre application, à la recherche d'`require`instructions `import` ou d'instructions, pour créer des ensembles contenant tous les actifs dont votre application a besoin. Cela permet de diffuser facilement les actifs via une page Web. Le SDK pour JavaScript peut être inclus `webpack` comme l'une des dépendances à inclure dans le bundle de sortie.

Pour plus d'informations sur`webpack`, consultez le [bundler du module Webpack](https://webpack.github.io/) sur. GitHub

## Installer webpack
<a name="webpack-installing"></a>

Pour installer le bundler de `webpack` modules, vous devez d'abord installer npm, le gestionnaire de packages Node.js. Tapez la commande suivante pour installer la `webpack` CLI et le JavaScript module.

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

Pour utiliser le `path` module permettant de travailler avec les chemins de fichiers et de répertoires, qui est installé automatiquement avec Webpack, vous devrez peut-être installer le `path-browserify` package Node.js. 

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

## Configurer le webpack
<a name="webpack-configuring"></a>

Par défaut, Webpack recherche un JavaScript fichier nommé `webpack.config.js` dans le répertoire racine de votre projet. Ce fichier spécifie vos options de configuration. Voici un exemple de fichier de `webpack.config.js` configuration pour les WebPack versions 5.0.0 et ultérieures.

**Note**  
Les exigences de configuration du Webpack varient en fonction de la version du Webpack que vous installez. Pour plus d'informations, consultez la [documentation du Webpack](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"}]
  }
  **/
};
```

Dans cet exemple, `browser.js` est spécifié comme *point d'entrée*. Le *point d'entrée* est le fichier `webpack` utilisé pour commencer à rechercher les modules importés. Le nom de fichier de la sortie est spécifié en tant que `bundle.js`. Ce fichier de sortie contiendra tout ce dont JavaScript l'application a besoin pour fonctionner. Si le code spécifié dans le point d'entrée importe ou nécessite d'autres modules, tels que le SDK pour JavaScript, ce code est groupé sans qu'il soit nécessaire de le spécifier dans la configuration.

## Exécuter le webpack
<a name="webpack-running"></a>

Pour créer une application à utiliser`webpack`, ajoutez ce qui suit à l'`scripts`objet de votre `package.json` fichier.

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

Voici un exemple de `package.json` fichier illustrant l'ajout`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"
  }
}
```

Pour créer votre application, entrez la commande suivante.

```
npm run build
```

Le `webpack` module bundler génère ensuite le JavaScript fichier que vous avez spécifié dans le répertoire racine de votre projet.

## Utiliser le bundle Webpack
<a name="webpack-using-bundle"></a>

Pour utiliser le bundle dans un script de navigateur, vous pouvez l'intégrer à l'aide d'une `<script>` balise, comme illustré dans l'exemple suivant.

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

## Bundle pour Node.js
<a name="webpack-nodejs-bundles"></a>

Vous pouvez l'utiliser `webpack` pour générer des bundles qui s'exécutent dans Node.js en les spécifiant `node` comme cible dans la configuration.

```
target: "node"
```

Cela s'avère utile lors de l'exécution d'une application Node.js dans un environnement où l'espace disque est limité. Voici un exemple de configuration `webpack.config.js` avec Node.js spécifié comme cible de sortie.

```
// 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"}]
  }
  **/
};
```