

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

# CORS untuk REST APIs di API Gateway
<a name="how-to-cors"></a>

[Cross-origin resource sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) adalah fitur keamanan browser yang membatasi permintaan HTTP lintas asal yang dimulai dari skrip yang berjalan di browser. Untuk informasi lebih lanjut, lihat [Apa itu CORS?](https://aws.amazon.com/what-is/cross-origin-resource-sharing/) .

## Menentukan apakah akan mengaktifkan dukungan CORS
<a name="apigateway-cors-request-types"></a>

Permintaan HTTP *lintas asal* adalah permintaan yang dibuat untuk:
+ *Domain* yang berbeda (misalnya, dari `example.com` ke`amazondomains.com`)
+ *Subdomain* yang berbeda (misalnya, dari `example.com` ke`petstore.example.com`)
+ *Port* yang berbeda (misalnya, dari `example.com` ke`example.com:10777`)
+ *Protokol* yang berbeda (misalnya, dari `https://example.com` ke`http://example.com`)

 Jika Anda tidak dapat mengakses API dan menerima pesan kesalahan yang berisi`Cross-Origin Request Blocked`, Anda mungkin perlu mengaktifkan CORS.

Permintaan HTTP cross-origin dapat dibagi menjadi dua jenis: permintaan *sederhana* dan permintaan *non-sederhana*.

## Mengaktifkan CORS untuk permintaan sederhana
<a name="apigateway-cors-simple-request"></a>

Permintaan HTTP *sederhana* jika semua kondisi berikut benar:
+ Ini dikeluarkan terhadap sumber daya API yang hanya mengizinkan`GET`,`HEAD`, dan `POST` permintaan.
+ Jika itu adalah permintaan `POST` metode, itu harus menyertakan `Origin` header.
+ Jenis konten payload permintaan adalah`text/plain`,`multipart/form-data`, atau`application/x-www-form-urlencoded`.
+ Permintaan tidak berisi header khusus.
+ Persyaratan tambahan apa pun yang tercantum dalam [dokumentasi Mozilla CORS untuk permintaan sederhana](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests).

Untuk permintaan `POST` metode lintas asal sederhana, respons dari sumber daya Anda harus menyertakan header `Access-Control-Allow-Origin: '*'` atau`Access-Control-Allow-Origin:{{'origin'}}`.

Semua permintaan HTTP lintas asal lainnya adalah permintaan *non-sederhana*.

## Mengaktifkan CORS untuk permintaan yang tidak sederhana
<a name="apigateway-enable-cors-non-simple"></a>

Jika sumber daya API Anda menerima permintaan yang tidak sederhana, Anda harus mengaktifkan dukungan CORS tambahan tergantung pada jenis integrasi Anda.

### Mengaktifkan CORS untuk integrasi non-proxy
<a name="apigateway-enable-cors-mock"></a>

Untuk integrasi ini, [protokol CORS](https://fetch.spec.whatwg.org/#http-cors-protocol) mengharuskan browser untuk mengirim permintaan preflight ke server dan menunggu persetujuan (atau permintaan kredensional) dari server sebelum mengirim permintaan yang sebenarnya. Anda harus mengonfigurasi API Anda untuk mengirim respons yang sesuai ke permintaan preflight. 

 Untuk membuat respons preflight: 

1. Buat `OPTIONS` metode dengan integrasi tiruan.

1. Tambahkan header respons berikut ke respons metode 200:
   + `Access-Control-Allow-Headers`
   + `Access-Control-Allow-Methods`
   + `Access-Control-Allow-Origin`

1. Atur perilaku passthrough integrasi ke`NEVER`. Dalam hal ini, permintaan metode dari jenis konten yang tidak dipetakan akan ditolak dengan respons Jenis Media Tidak Didukung HTTP 415. Untuk informasi selengkapnya, lihat [Perilaku permintaan metode untuk muatan tanpa memetakan template untuk REST APIs di API Gateway](integration-passthrough-behaviors.md).

1. Masukkan nilai untuk header respons. Untuk mengizinkan semua asal, semua metode, dan header umum, gunakan nilai header berikut:
   + `Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'`
   + `Access-Control-Allow-Methods: 'DELETE,GET,HEAD,OPTIONS,PUT,POST,PATCH'`
   + `Access-Control-Allow-Origin: '*'`

Setelah membuat permintaan preflight, Anda harus mengembalikan `Access-Control-Allow-Origin:{{'origin'}}` header `Access-Control-Allow-Origin: '*'` or untuk semua metode yang mendukung CORS untuk setidaknya semua 200 tanggapan.

### Mengaktifkan CORS untuk integrasi non-proxy menggunakan Konsol Manajemen AWS
<a name="apigateway-enable-cors-mock-console"></a>

Anda dapat menggunakan Konsol Manajemen AWS untuk mengaktifkan CORS. API Gateway membuat `OPTIONS` metode dan menambahkan `Access-Control-Allow-Origin` header ke respons integrasi metode yang ada. Ini tidak selalu berhasil, dan terkadang Anda perlu memodifikasi respons integrasi secara manual untuk mengembalikan `Access-Control-Allow-Origin` header untuk semua metode berkemampuan CORS untuk setidaknya semua 200 respons.

Jika Anda memiliki tipe media biner yang disetel ke `*/*` API Anda, saat API Gateway membuat `OPTIONS` metode, ubah `contentHandling` ke`CONVERT_TO_TEXT`.

Perintah [update-integration](https://docs.aws.amazon.com/cli/latest/reference/apigateway/update-integration.html) berikut mengubah ke `contentHandling` `CONVERT_TO_TEXT` untuk permintaan integrasi: 

```
aws apigateway update-integration \
  --rest-api-id {{abc123}} \
  --resource-id {{aaa111}} \
  --http-method OPTIONS \
  --patch-operations op='replace',path='/contentHandling',value='CONVERT_TO_TEXT'
```

[update-integration-response](https://docs.aws.amazon.com/cli/latest/reference/apigateway/update-integration-response.html)Perintah berikut mengubah `contentHandling` to `CONVERT_TO_TEXT` untuk respons integrasi:

```
aws apigateway update-integration-response \
  --rest-api-id {{abc123}} \
  --resource-id {{aaa111}} \
  --http-method OPTIONS \
  --status-code 200 \
  --patch-operations op='replace',path='/contentHandling',value='CONVERT_TO_TEXT'
```

## Mengaktifkan dukungan CORS untuk integrasi proxy
<a name="apigateway-enable-cors-proxy"></a>

Untuk integrasi proxy Lambda atau integrasi proxy HTTP, backend Anda bertanggung jawab untuk mengembalikan`Access-Control-Allow-Origin`,`Access-Control-Allow-Methods`, dan `Access-Control-Allow-Headers` header, karena integrasi proxy tidak mengembalikan respons integrasi. 

Contoh berikut fungsi Lambda mengembalikan header CORS yang diperlukan:

------
#### [ Node.js ]

```
export const handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Headers" : "{{Content-Type}}",
            "Access-Control-Allow-Origin": "{{https://www.example.com}}",
            "Access-Control-Allow-Methods": "{{OPTIONS,POST,GET}}"
        },
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};
```

------
#### [ Python 3 ]

```
import json

def lambda_handler(event, context):
    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Headers': '{{Content-Type}}',
            'Access-Control-Allow-Origin': '{{https://www.example.com}}',
            'Access-Control-Allow-Methods': '{{OPTIONS,POST,GET}}'
        },
        'body': json.dumps('Hello from Lambda!')
    }
```

------

**Topics**
+ [Menentukan apakah akan mengaktifkan dukungan CORS](#apigateway-cors-request-types)
+ [Mengaktifkan CORS untuk permintaan sederhana](#apigateway-cors-simple-request)
+ [Mengaktifkan CORS untuk permintaan yang tidak sederhana](#apigateway-enable-cors-non-simple)
+ [Mengaktifkan dukungan CORS untuk integrasi proxy](#apigateway-enable-cors-proxy)
+ [Aktifkan CORS pada sumber daya menggunakan konsol API Gateway](how-to-cors-console.md)
+ [Aktifkan CORS pada sumber daya menggunakan API impor API Gateway](enable-cors-for-resource-using-swagger-importer-tool.md)
+ [Uji CORS untuk API Gateway API](apigateway-test-cors.md)