La [Guía de referencia de la API de AWS SDK for JavaScript V3](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) describe en detalle todas las operaciones de la API para la versión 3 (V3) de AWS SDK for JavaScript. 

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

# Consideraciones sobre los scripts de navegador
<a name="browser-js-considerations"></a>

En los temas siguientes se describen las consideraciones especiales que se deben tener en cuenta a la hora de utilizarlos AWS SDK para JavaScript en los scripts del navegador.

**Topics**
+ [Creación del SDK para navegadores](building-sdk-for-browsers.md)
+ [Compartir recursos entre orígenes (CORS)](cors.md)
+ [Agrupación de aplicaciones con Webpack](webpack.md)

# Creación del SDK para navegadores
<a name="building-sdk-for-browsers"></a>

A diferencia del SDK de la JavaScript versión 2 (V2), la versión 3 no se proporciona como un JavaScript archivo con soporte incluido para un conjunto de servicios predeterminado. En cambio, la versión 3 le permite agrupar e incluir en el navegador solo el SDK para los JavaScript archivos que necesite, lo que reduce la sobrecarga. Recomendamos usar Webpack para agrupar el SDK necesario para JavaScript los archivos y cualquier paquete adicional de terceros que necesite en un solo `Javascript` archivo y cargarlo en los scripts del navegador mediante una `<script>` etiqueta. Para obtener más información sobre Webpack, consulte [Agrupación de aplicaciones con Webpack](webpack.md). 

Si trabaja con el SDK fuera de un entorno que aplique CORS en su navegador y si desea acceder a todos los servicios que proporciona el SDK JavaScript, puede crear una copia personalizada del SDK de forma local clonando el repositorio y ejecutando las mismas herramientas de compilación que compilan la versión alojada predeterminada del SDK. En las siguientes secciones se describen los pasos necesarios para compilar el SDK con servicios adicionales y versiones de API.

## Usa el SDK Builder para crear el SDK para JavaScript
<a name="using-the-sdk-builder"></a>

**nota**  
Amazon Web Services versión 3 (V3) ya no es compatible con Browser Builder. Para minimizar el uso del ancho de banda de las aplicaciones del navegador, le recomendamos que importe los módulos con nombre asignado y los agrupe para reducir su tamaño. Para obtener más información sobre la agrupación, consulte [Agrupación de aplicaciones con Webpack](webpack.md).

# Compartir recursos entre orígenes (CORS)
<a name="cors"></a>

El uso compartido de recursos entre orígenes o CORS es una característica de seguridad de los navegadores web modernos. Habilita a los navegadores web para que puedan negociar qué dominios pueden realizar solicitudes de sitios web o servicios externos. 

CORS es un factor importante que hay que tener en cuenta cuando se desarrollan aplicaciones de navegador con AWS SDK for JavaScript, ya que la mayoría de las solicitudes a recursos se envían a un dominio externo como, por ejemplo, el punto de conexión de un servicio web. Si su entorno de JavaScript aplica seguridad CORS, tiene que configurar CORS con el servicio.

CORS determina si se permitirá el uso compartido de recursos en una solicitud entre orígenes basándose en lo siguiente:
+ El dominio específico que efectúa la solicitud. 
+ El tipo de solicitud HTTP que se realiza (GET, PUT, POST, DELETE, etc.).

## Funcionamiento de CORS
<a name="how-cors-works"></a>

En el caso más sencillo, el navegador script realiza una solicitud GET para obtener un recurso de un servidor que se encuentra en otro dominio. En función de cómo sea la configuración de CORS de dicho servidor, si la solicitud proviene de un dominio con permiso para enviar solicitudes GET, el servidor de orígenes cruzados responderá devolviendo el recurso que se ha solicitado.

Si el dominio de solicitud o el tipo de solicitud HTTP no está autorizado, se denegará la solicitud. Sin embargo, con CORS es posible realizar una solicitud preliminar antes de enviarla realmente. En dicho caso, se realiza una solicitud preliminar en la que se envía la operación de solicitud de acceso `OPTIONS`. Si la configuración CORS del servidor de origen otorga acceso al dominio que realiza la solicitud, el servidor enviará una respuesta preliminar que contenga una lista de todos los tipos de solicitud HTTP que el dominio que realiza la solicitud puede hacer al recurso solicitado.

![\[Flujo de proceso para solicitudes de CORS\]](http://docs.aws.amazon.com/es_es/sdk-for-javascript/v3/developer-guide/images/cors-overview.png)


## ¿Es necesaria la configuración de CORS?
<a name="the-need-for-cors-configuration"></a>

Es preciso configurar CORS en los buckets de Amazon S3 para poder realizar operaciones en ellos. Puede que en algunos entornos JavaScript no se aplique CORS y, por consiguiente, no sea necesario configurarlo. Por ejemplo, si aloja su aplicación de un bucket de Amazon S3 y obtiene acceso a recursos de `*.s3.amazonaws.com` o algún otro punto de conexión específico, sus solicitudes no tendrán acceso a un dominio externo. Por lo tanto, esta configuración no necesita CORS. En este caso, se seguirá utilizando CORS para servicios que no sean Amazon S3.

## Configuración de CORS para un bucket de Amazon S3
<a name="configuring-cors-s3-bucket"></a>

Puede configurar un bucket de Amazon S3 para utilizar CORS en la consola Amazon S3.

Si está configurando CORS en la consola de administración de AWS, tiene que utilizar JSON para crear una configuración CORS. La nueva consola de administración de AWS solo admite configuraciones de CORS JSON. 

**importante**  
En la nueva consola de administración de AWS, la configuración de CORS tiene que ser JSON.

1. En la consola de administración de AWS, abra la consola Amazon S3, busque el bucket que desee configurar y active su casilla de verificación.

1. En el panel que se abre, seleccione **Permisos**.

1. En la pestaña **Permisos**, elija **Configuración de CORS**.

1. Escriba su configuración de CORS en el **Editor de configuración de CORS** y, a continuación, seleccione **Guardar**.

Una configuración de CORS es un archivo XML que contiene una serie de reglas dentro de una `<CORSRule>`. Una configuración puede tener hasta 100 reglas. Una regla se define con una de las siguientes etiquetas:
+ `<AllowedOrigin>`: especifica orígenes de dominios a los que permite realizar solicitudes de dominio cruzado.
+ `<AllowedMethod>`: especifica un tipo de solicitud que permite (GET, PUT, POST, DELETE, HEAD) en solicitudes de dominio cruzado.
+ `<AllowedHeader>`: especifica los encabezados que están permitidos en una solicitud preliminar.

Para ver las configuraciones de ejemplo, consulte [Cómo configurar CORS en mi bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html#how-do-i-enable-cors) en la *Guía del usuario de Amazon Simple Storage Service*.

## Ejemplo de configuración de CORS
<a name="cors-configuration-example"></a>

El siguiente ejemplo de configuración de CORS permite a un usuario ver, añadir, eliminar o actualizar los objetos contenidos en un bucket del dominio `example.org`. Sin embargo, le recomendamos que mantenga `<AllowedOrigin>` en el dominio de su sitio web. Puede especificar `"*"` para permitir cualquier origen.

**importante**  
En la nueva consola S3, la configuración de CORS debe ser 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"]
    }
]
```

------

Esta configuración no autoriza al usuario a realizar acciones en el bucket. Habilita al modelo de seguridad del navegador para que permita una solicitud a Amazon S3. Los permisos tienen que configurarse a través de permisos de bucket o permisos de rol de IAM .

Puede utilizar `ExposeHeader` para permitir que el SDK lea los encabezados de respuestas que devuelve Amazon S3. Por ejemplo, para leer el encabezado `ETag` de una operación `PUT` o una carga multiparte, debe incluir la etiqueta `ExposeHeader` en su configuración, tal y como se muestra en el ejemplo anterior. El SDK solo puede obtener acceso a los encabezados que se exponen a través de la configuración de CORS. Si establece metadatos en el objeto, los valores se devuelven como encabezados con el prefijo `x-amz-meta-`, como `x-amz-meta-my-custom-header`, y también deben exponerse de la misma manera.

# Agrupación de aplicaciones con Webpack
<a name="webpack"></a>

El uso de módulos de código por parte de aplicaciones web en scripts de navegador o Node.js crea dependencias. Estos módulos de código pueden tener dependencias propias, lo que se traduce en una colección de módulos interconectados que su aplicación necesita para funcionar. Para administrar dependencias, puede utilizar un instalador de módulos como Webpack.

El instalador de módulos Webpack analiza el código de la aplicación para buscar instrucciones import o require y crear agrupaciones que contengan todos los recursos que la aplicación necesita. Esto es para que los activos se puedan servir fácilmente a través de una página web. El SDK para JavaScript se puede incluir en Webpack como una de las dependencias que se deben incluir en el paquete de salida.

Para obtener más información acerca de Webpack, consulte el [instalador de módulos Webpack](https://webpack.github.io/) en GitHub.

## Instalación de Webpack
<a name="webpack-installing"></a>

Para instalar el instalador de módulos Webpack, en primer lugar debe tener npm, el administrador de paquetes de Node.js, instalado. Escriba el comando siguiente para instalar CLI de Webpack y el módulo JavaScript.

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

Para usar el módulo path para trabajar con rutas de archivos y directorios, que se instala automáticamente con Webpack, es posible que necesite instalar el paquete `path-browserify` de Node.js. 

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

## Configuración de Webpack
<a name="webpack-configuring"></a>

De forma predeterminada, Webpack busca un archivo de JavaScript llamado `webpack.config.js` en el directorio raíz del proyecto. Este archivo especifica sus opciones de configuración. El siguiente es un ejemplo de un archivo de configuración `webpack.config.js` para la versión 5.0.0 y posteriores de WebPack.

**nota**  
Los requisitos de configuración de Webpack varían según la versión de Webpack que instale. Para obtener más información, consulte la [documentación de 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"}]
  }
  **/
};
```

En este ejemplo, `browser.js` se especifica como el *punto de entrada*. El *punto de entrada* es el archivo que Webpack utiliza para comenzar a buscar módulos importados. El nombre de archivo de la salida se especifica como `bundle.js`. Este archivo de salida contendrá todo el JavaScript que la aplicación necesita ejecutar. Si el código especificado en el punto de entrada importa o requiere otros módulos como, por ejemplo, el SDK para JavaScript, dicho código se empaqueta sin necesidad de especificarlo en la configuración.

## Ejecución de Webpack
<a name="webpack-running"></a>

Para desarrollar una aplicación para utilizar Webpack, añada lo siguiente al objeto `scripts` de su archivo `package.json`.

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

El siguiente es un archivo `package.json` de ejemplo que muestra cómo agregar 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"
  }
}
```

Para compilar su aplicación, introduzca el comando siguiente.

```
npm run build
```

Luego, el instalador del módulo Webpack genera el archivo JavaScript que ha especificado en el directorio raíz del proyecto.

## Uso de la agrupación de Webpack
<a name="webpack-using-bundle"></a>

Para utilizar la agrupación en un script de navegador, puede incorporar la agrupación con una etiqueta `<script>`, tal y como se muestra en el siguiente ejemplo.

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

## Agrupación para Node.js
<a name="webpack-nodejs-bundles"></a>

Puede utilizar Webpack para generar agrupaciones que se ejecutan en Node.js especificando `node` como destino en la configuración.

```
target: "node"
```

Esto resulta útil al ejecutar una aplicación de Node.js en un entorno donde el espacio en el disco es limitado. A continuación se muestra un ejemplo de configuración de `webpack.config.js` con Node.js especificado como destino de salida.

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