[Panduan Referensi API AWS SDK untuk JavaScript V3](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) menjelaskan secara rinci semua operasi API untuk AWS SDK untuk JavaScript versi 3 (V3). 

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Pertimbangan Skrip Browser
<a name="browser-js-considerations"></a>

Topik berikut menjelaskan pertimbangan khusus untuk menggunakan skrip AWS SDK untuk JavaScript di browser.

**Topics**
+ [Membangun SDK untuk Browser](building-sdk-for-browsers.md)
+ [Cross-origin resource sharing (CORS)](cors.md)
+ [Bundel aplikasi dengan webpack](webpack.md)

# Membangun SDK untuk Browser
<a name="building-sdk-for-browsers"></a>

Tidak seperti SDK untuk JavaScript versi 2 (V2), V3 tidak disediakan sebagai JavaScript file dengan dukungan yang disertakan untuk serangkaian layanan default. Sebagai gantinya, V3 memungkinkan Anda untuk menggabungkan dan menyertakan di browser hanya SDK untuk JavaScript file yang Anda butuhkan, mengurangi overhead. Sebaiknya gunakan Webpack untuk menggabungkan SDK yang diperlukan untuk JavaScript file, dan paket pihak ketiga tambahan yang Anda butuhkan, ke dalam satu `Javascript` file, dan memuatnya ke dalam skrip browser menggunakan tag. `<script>` Untuk informasi selengkapnya tentang Webpack, lihat[Bundel aplikasi dengan webpack](webpack.md). 

Jika Anda bekerja dengan SDK di luar lingkungan yang memberlakukan CORS di browser Anda dan jika Anda ingin akses ke semua layanan yang disediakan oleh SDK for JavaScript, Anda dapat membuat salinan khusus SDK secara lokal dengan mengkloning repositori dan menjalankan alat build yang sama yang membangun versi default SDK yang dihosting. Bagian berikut menjelaskan langkah-langkah untuk membangun SDK dengan layanan tambahan dan versi API.

## Menggunakan SDK Builder untuk membangun SDK untuk JavaScript
<a name="using-the-sdk-builder"></a>

**catatan**  
Amazon Web Services versi 3 (V3) tidak lagi mendukung Browser Builder. Untuk meminimalkan penggunaan bandwidth aplikasi browser, kami sarankan Anda mengimpor modul bernama, dan bundel mereka untuk mengurangi ukuran. Untuk informasi selengkapnya tentang bundling, lihat[Bundel aplikasi dengan webpack](webpack.md).

# Cross-origin resource sharing (CORS)
<a name="cors"></a>

Berbagi sumber daya lintas asal, atau CORS, adalah fitur keamanan browser web modern. Ini memungkinkan browser web untuk menegosiasikan domain mana yang dapat membuat permintaan situs web atau layanan eksternal. 

CORS adalah pertimbangan penting ketika mengembangkan aplikasi browser dengan AWS SDK untuk JavaScript karena sebagian besar permintaan ke sumber daya dikirim ke domain eksternal, seperti titik akhir untuk layanan web. Jika JavaScript lingkungan Anda memberlakukan keamanan CORS, Anda harus mengonfigurasi CORS dengan layanan.

CORS menentukan apakah akan mengizinkan pembagian sumber daya dalam permintaan lintas asal berdasarkan hal berikut:
+ Domain spesifik yang membuat permintaan 
+ Jenis permintaan HTTP yang dibuat (GET, PUT, POST, DELETE dan sebagainya)

## Bagaimana CORS bekerja
<a name="how-cors-works"></a>

Dalam kasus yang paling sederhana, skrip browser Anda membuat permintaan GET untuk sumber daya dari server di domain lain. Bergantung pada konfigurasi CORS server tersebut, jika permintaan berasal dari domain yang berwenang untuk mengirimkan permintaan GET, server lintas asal merespons dengan mengembalikan sumber daya yang diminta.

Jika domain yang meminta atau jenis permintaan HTTP tidak diotorisasi, permintaan ditolak. Namun, CORS memungkinkan untuk melakukan pra-penerbangan permintaan sebelum benar-benar mengirimkannya. Dalam hal ini, permintaan preflight dibuat di mana operasi permintaan `OPTIONS` akses dikirim. Jika konfigurasi CORS server lintas asal memberikan akses ke domain yang meminta, server mengirimkan kembali respons preflight yang mencantumkan semua jenis permintaan HTTP yang dapat dibuat oleh domain permintaan pada sumber daya yang diminta.

![\[Alur proses untuk permintaan CORS\]](http://docs.aws.amazon.com/id_id/sdk-for-javascript/v3/developer-guide/images/cors-overview.png)


## Apakah konfigurasi CORS diperlukan?
<a name="the-need-for-cors-configuration"></a>

Bucket Amazon S3 memerlukan konfigurasi CORS sebelum Anda dapat melakukan operasi pada mereka. Di beberapa JavaScript lingkungan CORS mungkin tidak diberlakukan dan oleh karena itu mengonfigurasi CORS tidak diperlukan. Misalnya, jika Anda meng-host aplikasi dari bucket Amazon S3 dan mengakses sumber daya dari `*.s3.amazonaws.com` atau titik akhir tertentu lainnya, permintaan Anda tidak akan mengakses domain eksternal. Oleh karena itu, konfigurasi ini tidak memerlukan CORS. Dalam hal ini, CORS masih digunakan untuk layanan selain Amazon S3.

## Konfigurasikan CORS untuk bucket Amazon S3
<a name="configuring-cors-s3-bucket"></a>

Anda dapat mengonfigurasi bucket Amazon S3 untuk menggunakan CORS di konsol Amazon S3.

Jika Anda mengonfigurasi CORS di Konsol Manajemen Layanan AWS Web, Anda harus menggunakan JSON untuk membuat konfigurasi CORS. Konsol Manajemen Layanan AWS Web baru hanya mendukung konfigurasi JSON CORS. 

**penting**  
Di Konsol Manajemen Layanan AWS Web yang baru, konfigurasi CORS harus JSON.

1. Di Konsol Manajemen Layanan AWS Web, buka konsol Amazon S3, temukan bucket yang ingin Anda konfigurasi dan pilih kotak centang.

1. Di panel yang terbuka, pilih **Izin**.

1. Pada tab **Izin**, pilih **Konfigurasi CORS**.

1. **Masukkan konfigurasi CORS Anda di **CORS Configuration Editor**, lalu pilih Simpan.**

Konfigurasi CORS adalah file XMLyang berisi serangkaian aturan dalam file. `<CORSRule>` Konfigurasi dapat memiliki hingga 100 aturan. Aturan didefinisikan oleh salah satu tag berikut:
+ `<AllowedOrigin>`— Menentukan asal domain yang Anda izinkan untuk membuat permintaan lintas domain.
+ `<AllowedMethod>`— Menentukan jenis permintaan yang Anda izinkan (GET, PUT, POST, DELETE, HEAD) dalam permintaan lintas domain.
+ `<AllowedHeader>`— Menentukan header diperbolehkan dalam permintaan preflight.

Misalnya konfigurasi, lihat [Bagaimana cara mengonfigurasi CORS di bucket saya?](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html#how-do-i-enable-cors) di *Panduan Pengguna Layanan Penyimpanan Sederhana Amazon*.

## Contoh konfigurasi CORS
<a name="cors-configuration-example"></a>

Contoh konfigurasi CORS berikut memungkinkan pengguna untuk melihat, menambah, menghapus, atau memperbarui objek di dalam bucket dari domain`example.org`. Namun, kami menyarankan Anda `<AllowedOrigin>` untuk menjangkau domain situs web Anda. Anda dapat menentukan `"*"` untuk mengizinkan asal apa pun.

**penting**  
Pada konsol S3 baru, konfigurasi CORS harus 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"]
    }
]
```

------

Konfigurasi ini tidak mengizinkan pengguna untuk melakukan tindakan pada bucket. Ini memungkinkan model keamanan browser untuk memungkinkan permintaan ke Amazon S3. Izin harus dikonfigurasi melalui izin bucket atau izin peran IAM.

Anda dapat menggunakan `ExposeHeader` untuk membiarkan SDK membaca header respons yang dikembalikan dari Amazon S3. Misalnya, membaca `ETag` header dari upload `PUT` atau multipart, Anda perlu menyertakan `ExposeHeader` tag dalam konfigurasi Anda, seperti yang ditunjukkan pada contoh sebelumnya. SDK hanya dapat mengakses header yang diekspos melalui konfigurasi CORS. Jika Anda mengatur metadata pada objek, nilai dikembalikan sebagai header dengan awalan`x-amz-meta-`, seperti`x-amz-meta-my-custom-header`, dan juga harus diekspos dengan cara yang sama.

# Bundel aplikasi dengan webpack
<a name="webpack"></a>

Penggunaan modul kode oleh aplikasi web dalam skrip browser atau Node.js menciptakan dependensi. Modul kode ini dapat memiliki dependensi sendiri, menghasilkan kumpulan modul yang saling berhubungan yang dibutuhkan aplikasi Anda untuk berfungsi. Untuk mengelola dependensi, Anda dapat menggunakan bundler modul seperti. `webpack`

`webpack`Modul bundler mem-parsing kode aplikasi Anda, mencari `import` atau `require` pernyataan, untuk membuat bundel yang berisi semua aset yang dibutuhkan aplikasi Anda. Ini agar aset dapat dengan mudah dilayani melalui halaman web. SDK for JavaScript dapat dimasukkan `webpack` sebagai salah satu dependensi untuk disertakan dalam bundel keluaran.

Untuk informasi selengkapnya`webpack`, lihat [bundler modul webpack](https://webpack.github.io/) aktif. GitHub

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

Untuk menginstal bundler `webpack` modul, Anda harus menginstal npm, manajer paket Node.js terlebih dahulu. Ketik perintah berikut untuk menginstal `webpack` CLI dan JavaScript modul.

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

Untuk menggunakan `path` modul untuk bekerja dengan jalur file dan direktori, yang diinstal secara otomatis dengan webpack, Anda mungkin perlu menginstal `path-browserify` paket Node.js. 

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

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

Secara default, Webpack mencari JavaScript file bernama `webpack.config.js` di direktori root proyek Anda. File ini menentukan opsi konfigurasi Anda. Berikut ini adalah contoh file `webpack.config.js` konfigurasi untuk WebPack versi 5.0.0 dan yang lebih baru.

**catatan**  
Persyaratan konfigurasi webpack bervariasi tergantung pada versi Webpack yang Anda instal. Untuk informasi selengkapnya, lihat [dokumentasi 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"}]
  }
  **/
};
```

Dalam contoh ini, `browser.js` ditentukan sebagai *titik masuk*. *Titik masuk* adalah file yang `webpack` digunakan untuk mulai mencari modul yang diimpor. Nama file output ditentukan sebagai`bundle.js`. File output ini akan berisi semua aplikasi JavaScript yang perlu dijalankan. Jika kode yang ditentukan di titik masuk mengimpor atau memerlukan modul lain, seperti SDK for JavaScript, kode tersebut dibundel tanpa perlu menentukannya dalam konfigurasi.

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

Untuk membangun aplikasi yang akan digunakan`webpack`, tambahkan berikut ini ke `scripts` objek dalam `package.json` file Anda.

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

Berikut ini adalah contoh `package.json` file yang menunjukkan penambahan`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"
  }
}
```

Untuk membangun aplikasi Anda, masukkan perintah berikut.

```
npm run build
```

`webpack`Modul bundler kemudian menghasilkan JavaScript file yang Anda tentukan di direktori root proyek Anda.

## Gunakan bundel webpack
<a name="webpack-using-bundle"></a>

Untuk menggunakan bundel dalam skrip browser, Anda dapat menggabungkan bundel menggunakan `<script>` tag, seperti yang ditunjukkan pada contoh berikut.

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

## Bundel untuk Node.js
<a name="webpack-nodejs-bundles"></a>

Anda dapat menggunakan `webpack` untuk menghasilkan bundel yang berjalan di Node.js dengan menentukan `node` sebagai target dalam konfigurasi.

```
target: "node"
```

Ini berguna saat menjalankan aplikasi Node.js di lingkungan di mana ruang disk terbatas. Berikut adalah contoh `webpack.config.js` konfigurasi dengan Node.js ditentukan sebagai target 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"}]
  }
  **/
};
```