La [AWS SDK per JavaScript V3 API Reference Guide](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) descrive in dettaglio tutte le operazioni API per la AWS SDK per JavaScript versione 3 (V3). 

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

# Considerazioni sullo script di browser
<a name="browser-js-considerations"></a>

I seguenti argomenti descrivono considerazioni speciali per l'utilizzo degli script nei browser. AWS SDK per JavaScript 

**Topics**
+ [Crea l'SDK per i browser](building-sdk-for-browsers.md)
+ [Cross-Origin Resource Sharing (CORS)](cors.md)
+ [Raggruppa le applicazioni con webpack](webpack.md)

# Crea l'SDK per i browser
<a name="building-sdk-for-browsers"></a>

A differenza dell'SDK per la JavaScript versione 2 (V2), V3 non viene fornito come JavaScript file con supporto incluso per un set di servizi predefinito. V3 consente invece di raggruppare e includere nel browser solo l'SDK per i JavaScript file necessari, riducendo il sovraccarico. Ti consigliamo di utilizzare Webpack per raggruppare l'SDK richiesto per JavaScript i file e tutti i pacchetti di terze parti aggiuntivi richiesti in un unico `Javascript` file e caricarlo negli script del browser utilizzando un tag. `<script>` Per ulteriori informazioni su Webpack, consulta. [Raggruppa le applicazioni con webpack](webpack.md) 

Se utilizzi l'SDK al di fuori di un ambiente che applica CORS nel tuo browser e desideri accedere a tutti i servizi forniti dall'SDK per JavaScript, puoi creare una copia personalizzata dell'SDK localmente clonando il repository ed eseguendo gli stessi strumenti di compilazione che creano la versione ospitata predefinita dell'SDK. Le sezioni seguenti descrivono la procedura per creare l'SDK con servizi e versioni dell'API aggiuntivi.

## Usa SDK Builder per creare l'SDK per JavaScript
<a name="using-the-sdk-builder"></a>

**Nota**  
La versione 3 (V3) di Amazon Web Services non supporta più Browser Builder. Per ridurre al minimo l'utilizzo della larghezza di banda delle applicazioni browser, ti consigliamo di importare moduli denominati e di raggrupparli per ridurne le dimensioni. Per ulteriori informazioni sul raggruppamento, consulta. [Raggruppa le applicazioni con webpack](webpack.md)

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

Il Cross-origin resource sharing, o CORS, è una caratteristica di sicurezza dei moderni browser Web. In questo modo i browser Web possono negoziare quali domini possono fare richieste di siti Web o servizi esterni. 

CORS è fondamentale quando si sviluppano applicazioni di tipo browser con AWS SDK per JavaScript perché la maggior parte delle richieste di risorse vengono inviate a un dominio esterno, ad esempio l'endpoint di un servizio Web. Se JavaScript l'ambiente utilizza la sicurezza CORS, è necessario configurare CORS con il servizio.

CORS determina se consentire la condivisione di risorse in una richiesta tra origini diverse in base a quanto segue:
+ Il dominio specifico che effettua la richiesta 
+ Il tipo di richiesta HTTP effettuata (GET, PUT, POST, DELETE e così via)

## Come funziona CORS
<a name="how-cors-works"></a>

Nel caso più semplice, lo script di browser invia una richiesta GET per una risorsa da un server in un altro dominio. A seconda della configurazione CORS del server, se la richiesta proviene da un dominio che è autorizzato a inviare le richieste GET, il server cross-origin risponde restituendo la risorsa richiesta.

Se il dominio che effettua la richiesta o il tipo di richiesta HTTP non è autorizzato, la richiesta viene negata. Tuttavia, CORS permette di preparare la richiesta prima dell'invio. In questo caso, viene effettuata una richiesta preliminare in cui viene inviata la richiesta di accesso `OPTIONS`. Se la configurazione CORS del server cross-origin consente di concedere l'accesso al dominio richiedente, il server invia una risposta preliminare che elenca tutti i tipi di richieste HTTP che il dominio può effettuare sulla risorsa richiesta.

![\[Flusso di elaborazione per le richieste CORS\]](http://docs.aws.amazon.com/it_it/sdk-for-javascript/v3/developer-guide/images/cors-overview.png)


## È richiesta la configurazione CORS?
<a name="the-need-for-cors-configuration"></a>

I bucket Amazon S3 richiedono la configurazione CORS prima di poter eseguire operazioni su di essi. In alcuni JavaScript ambienti CORS potrebbe non essere applicato e pertanto la configurazione di CORS non è necessaria. Ad esempio, se ospiti l'applicazione da un bucket Amazon S3 e accedi alle risorse da `*.s3.amazonaws.com` o da qualche altro endpoint specifico, le tue richieste non accederanno a un dominio esterno. Pertanto, questa configurazione non richiede CORS. In questo caso, CORS viene ancora utilizzato per servizi diversi da Amazon S3.

## Configurare CORS per un bucket Amazon S3
<a name="configuring-cors-s3-bucket"></a>

Puoi configurare un bucket Amazon S3 per utilizzare CORS nella console Amazon S3.

Se stai configurando CORS nella console di gestione dei servizi AWS Web, devi usare JSON per creare una configurazione CORS. La nuova console di gestione dei servizi AWS Web supporta solo le configurazioni JSON CORS. 

**Importante**  
Nella nuova console di gestione dei servizi AWS Web, la configurazione CORS deve essere JSON.

1. Nella console di gestione dei servizi AWS Web, apri la console Amazon S3, trova il bucket che desideri configurare e seleziona la relativa casella di controllo.

1. **Nel riquadro che si apre, scegli Autorizzazioni.**

1. Nella scheda **Autorizzazioni**, scegliete Configurazione **CORS.**

1. **Immettete la configurazione CORS nel **CORS Configuration Editor**, quindi scegliete Salva.**

Una configurazione CORS è un file XML che contiene una serie di regole all'interno di un `<CORSRule>`. Una configurazione può avere massimo 100 regole. Una regola è definita da uno dei seguenti tag:
+ `<AllowedOrigin>`— Specificate le origini del dominio a cui consentite di effettuare richieste tra domini.
+ `<AllowedMethod>`— Specificate il tipo di richiesta consentita (GET, PUT, POST, DELETE, HEAD) nelle richieste tra domini.
+ `<AllowedHeader>`— Speciifica le intestazioni consentite in una richiesta di preflight.

Per esempi di configurazioni, vedi [Come posso configurare CORS sul mio bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html#how-do-i-enable-cors)? nella *Guida per l'utente di Amazon Simple Storage Service*.

## Esempio di configurazione CORS
<a name="cors-configuration-example"></a>

Il seguente esempio di configurazione CORS consente a un utente di visualizzare, aggiungere, rimuovere o aggiornare oggetti all'interno di un bucket dal dominio. `example.org` Tuttavia, ti consigliamo di estendere l'ambito `<AllowedOrigin>` al dominio del tuo sito web. È possibile specificare `"*"` per consentire l'origine.

**Importante**  
Nella nuova console S3, la configurazione CORS deve essere 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"]
    }
]
```

------

Questa configurazione non autorizza l'utente a eseguire azioni nel bucket. Abilita il modello di sicurezza del browser per consentire una richiesta ad Amazon S3. Le autorizzazioni devono essere configurate tramite i permessi dei bucket o i permessi dei ruoli IAM.

Puoi utilizzarlo `ExposeHeader` per consentire all'SDK di leggere le intestazioni di risposta restituite da Amazon S3. Ad esempio, se leggi l'`ETag`intestazione da un caricamento in più parti `PUT` o in più parti, devi includere il `ExposeHeader` tag nella configurazione, come mostrato nell'esempio precedente. Il kit SDK è in grado di accedere solo alle intestazioni esposte attraverso la configurazione CORS. Se si impostano i metadati nell'oggetto, i valori vengono restituiti come intestazioni con il prefisso `x-amz-meta-`, ad esempio `x-amz-meta-my-custom-header`, e devono essere esposti in modo analogo.

# Raggruppa le applicazioni con webpack
<a name="webpack"></a>

L'uso di moduli di codice da parte delle applicazioni Web negli script del browser o in Node.js crea dipendenze. Questi moduli di codice possono avere dipendenze proprie, generando una raccolta di moduli interconnessi richiesti dall'applicazione per funzionare. Per gestire le dipendenze, puoi usare un bundler di moduli come. `webpack`

Il bundler di `webpack` moduli analizza il codice dell'applicazione, cercando le nostre `require` istruzioni, `import` per creare pacchetti che contengono tutte le risorse di cui l'applicazione ha bisogno. In questo modo le risorse possono essere facilmente servite tramite una pagina Web. L'SDK for JavaScript può essere incluso `webpack` come una delle dipendenze da includere nel pacchetto di output.

Per ulteriori informazioni in merito`webpack`, consulta il bundler del modulo [webpack](https://webpack.github.io/) su. GitHub

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

Per installare il bundler del `webpack` modulo, devi prima avere installato npm, il gestore di pacchetti Node.js. Digita il comando seguente per installare la `webpack` CLI e JavaScript il modulo.

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

Per utilizzare il `path` modulo per lavorare con i percorsi di file e directory, che viene installato automaticamente con webpack, potrebbe essere necessario installare il pacchetto Node.js`path-browserify`. 

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

## Configura webpack
<a name="webpack-configuring"></a>

Per impostazione predefinita, Webpack cerca un JavaScript file denominato `webpack.config.js` nella directory principale del progetto. Questo file specifica le opzioni di configurazione. Di seguito è riportato un esempio di file di `webpack.config.js` configurazione per la WebPack versione 5.0.0 e successive.

**Nota**  
I requisiti di configurazione di Webpack variano a seconda della versione di Webpack installata. Per ulteriori informazioni, consulta la documentazione di [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"}]
  }
  **/
};
```

In questo esempio, `browser.js` viene specificato come *punto di ingresso*. Il *punto di ingresso* è il file `webpack` utilizzato per iniziare la ricerca dei moduli importati. Come `bundle.js` è specificato il nome del file di output. Questo file di output conterrà tutto JavaScript il necessario per l'esecuzione dell'applicazione. Se il codice specificato nel punto di ingresso importa o richiede altri moduli, come l'SDK for JavaScript, quel codice viene fornito in bundle senza bisogno di specificarlo nella configurazione.

## Esegui webpack
<a name="webpack-running"></a>

Per creare un'applicazione da usare`webpack`, aggiungi quanto segue all'`scripts`oggetto nel tuo `package.json` file.

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

Di seguito è riportato un `package.json` file di esempio che dimostra l'aggiunta`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"
  }
}
```

Per creare la tua applicazione, inserisci il seguente comando.

```
npm run build
```

Il bundler del `webpack` modulo genera quindi il JavaScript file specificato nella directory principale del progetto.

## Usa il pacchetto webpack
<a name="webpack-using-bundle"></a>

Per utilizzare il pacchetto in uno script del browser, puoi incorporarlo utilizzando un `<script>` tag, come mostrato nell'esempio seguente.

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

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

È possibile `webpack` utilizzarlo per generare pacchetti che vengono eseguiti in Node.js specificandolo `node` come destinazione nella configurazione.

```
target: "node"
```

Questa funzione è utile quando si esegue un'applicazione Node.js in un ambiente in cui lo spazio su disco è limitato. Ecco un esempio di configurazione `webpack.config.js` con Node.js specificato come destinazione dell'output.

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