Mengonfigurasi berbagi sumber daya lintas asal (CORS) untuk Azure Container Apps

Artikel ini memperlihatkan kepada Anda cara mengaktifkan dan mengonfigurasi CORS di aplikasi kontainer anda yang berjalan dalam satu domain untuk mengakses sumber daya dari server di domain yang berbeda. Secara default, browser memblokir permintaan lintas asal tersebut sebagai langkah keamanan. Saat Anda perlu mengizinkan aplikasi klien yang dihosting di domain yang berbeda untuk mengakses aplikasi kontainer, Anda dapat mengonfigurasi CORS untuk secara eksplisit mengizinkan permintaan ini.

Saat mengaktifkan CORS, Anda dapat mengonfigurasi pengaturan berikut:

Pengaturan	Penjelasan
Izinkan akses	Menunjukkan apakah akan mengembalikan Access-Control-Allow-Credentials header.
Usia maks	Access-Control-Max-Age Mengonfigurasi header respons untuk menunjukkan berapa lama (dalam detik) hasil permintaan pra-penerbangan CORS dapat di-cache.
Asal yang dibolehkan	Daftar asal yang diizinkan untuk permintaan lintas asal (misalnya, https://www.contoso.com). Mengontrol header respons Access-Control-Allow-Origin. Gunakan * untuk mengizinkan semua.
Metode yang dibolehkan	Daftar metode permintaan HTTP yang diizinkan untuk permintaan lintas asal. Access-Control-Allow-Methods Mengontrol header respons. Gunakan * untuk mengizinkan semua.
Header yang dibolehkan	Daftar header yang diizinkan dalam permintaan lintas sumber. Mengontrol header respons Access-Control-Allow-Headers. Gunakan * untuk mengizinkan semua.
Mengekspos header	Secara default, tidak semua header respons diekspos ke kode JavaScript sisi klien dalam permintaan lintas asal. Header yang diekspos adalah header tambahan yang dapat disertakan server dalam respons. Mengontrol header respons Access-Control-Expose-Headers. Gunakan * untuk menampilkan semua.

Properti	Penjelasan	Jenis
allowCredentials	Menunjukkan apakah akan mengembalikan Access-Control-Allow-Credentials header.	Boolean
maxAge	Access-Control-Max-Age Mengonfigurasi header respons untuk menunjukkan berapa lama (dalam detik) hasil permintaan pra-penerbangan CORS dapat di-cache.	Bilangan bulat
allowedOrigins	Daftar asal yang diizinkan untuk permintaan lintas asal (misalnya, https://www.contoso.com). Mengontrol Access-Control-Allow-Origin header respons. Gunakan * untuk mengizinkan semua.	array dari string
allowedMethods	Daftar metode permintaan HTTP yang diizinkan dalam permintaan lintas asal. Mengontrol header respons Access-Control-Allow-Methods. Gunakan * untuk mengizinkan semua.	array string
allowedHeaders	Daftar header yang diizinkan dalam permintaan lintas asal. Mengontrol tajuk respons Access-Control-Allow-Headers. Gunakan * untuk mengizinkan semua.	array dari string-string
exposeHeaders	Secara default, tidak semua header respons diekspos ke kode JavaScript sisi klien dalam permintaan lintas asal. Header yang diekspos adalah header tambahan yang dapat disertakan oleh server dalam respons. Mengontrol respons header Access-Control-Expose-Headers. Gunakan * untuk menampilkan semua.	array dari string-string

Untuk informasi selengkapnya, lihat referensi Web Hypertext Application Technology Working Group (WHATWG) tentang respons HTTP yang valid dari permintaan pengambilan data.

Mengaktifkan dan mengonfigurasi CORS

1. Buka aplikasi kontainer Anda di portal Azure.

2. Dari menu pengaturan, di bawah Jaringan, pilih CORS.

   

Dengan CORS diaktifkan, Anda dapat menambahkan, mengedit, dan menghapus nilai untuk Asal yang Diizinkan, Metode yang Diizinkan, Header yang Diizinkan, dan Header yang Dapat Diperlihatkan.

Untuk mengizinkan nilai yang dapat diterima untuk metoda, header, atau asal, masukkan * sebagai nilainya.

Catatan

Pembaruan pada pengaturan konfigurasi melalui baris perintah akan menimpa pengaturan Anda yang ada saat ini. Pastikan untuk menggabungkan pengaturan Anda saat ini ke dalam nilai CORS baru yang ingin Anda atur untuk memastikan konfigurasi Anda tetap konsisten.

Templat ARM

Kode berikut mewakili bentuk pengaturan CORS Anda dalam templat ARM ketika mengonfigurasi aplikasi kontainer Anda.

{ 
  ... 
  "properties": { 
      ... 
      "configuration": { 
         ... 
          "ingress": { 
              ... 
              "corsPolicy": { 
                "allowCredentials": true,
                "maxAge": 5000,
                "allowedOrigins": ["https://example.com"], 
                "allowedMethods": ["GET","POST"], 
                "allowedHeaders": [], 
                "exposeHeaders": []
              } 
          } 
      } 
  } 
}

YAML

Kode berikut menunjukkan bentuk yang diambil oleh pengaturan CORS Anda ketika mengonfigurasi aplikasi wadah Anda.

...
properties: 
  configuration: 
    ingress: 
    corsPolicy:
      allowCredentials: true
      maxAge: 5000
      allowedOrigins:
        - "https://example.com"
      allowedMethods:
        - "GET"
        - "POST"
      allowedHeaders: []
      exposeHeaders: []

Setelah menambahkan nilai khusus untuk konfigurasi, Anda dapat menggunakan az containerapp ingress cors update untuk mengatur konfigurasi CORS untuk aplikasi kontainer Anda.

Sebelum Anda menjalankan perintah berikut, ganti placeholder yang dikelilingi oleh <> dengan nilai Anda.

az containerapp ingress cors update --name <APP_NAME> --resource-group <RESOURCE_GROUP> –yaml <YAML_FILE_NAME>

Langkah berikutnya

Mengonfigurasi pengaturan masuk