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

Secara default, permintaan yang dibuat melalui browser ke domain yang tidak cocok dengan domain asal halaman diblokir. Untuk menghindari pembatasan ini untuk layanan yang disebarkan ke Aplikasi Kontainer, Anda dapat mengaktifkan CORS.

Artikel ini memperlihatkan kepada Anda cara mengaktifkan dan mengonfigurasi CORS di aplikasi kontainer Anda.

Saat mengaktifkan CORS, Anda dapat mengonfigurasi pengaturan berikut:

Pengaturan	Penjelasan
Perbolehkan kredensial	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). Access-Control-Allow-Origin Mengontrol header respons. Gunakan * untuk mengizinkan semua.
Metode yang dibolehkan	Daftar metode permintaan HTTP yang diizinkan dalam permintaan lintas asal. Access-Control-Allow-Methods Mengontrol header respons. Gunakan * untuk mengizinkan semua.
Header yang dibolehkan	Daftar header yang diizinkan dalam permintaan lintas asal. Access-Control-Allow-Headers Mengontrol header respons. 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 server header tambahan yang dapat disertakan dalam respons. Access-Control-Expose-Headers Mengontrol header respons. Gunakan * untuk mengekspos 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.	Integer
allowedOrigins	Daftar asal yang diizinkan untuk permintaan lintas asal (misalnya, https://www.contoso.com). Access-Control-Allow-Origin Mengontrol header respons. Gunakan * untuk mengizinkan semua.	array string
allowedMethods	Daftar metode permintaan HTTP yang diizinkan dalam permintaan lintas asal. Access-Control-Allow-Methods Mengontrol header respons. Gunakan * untuk mengizinkan semua.	array string
allowedHeaders	Daftar header yang diizinkan dalam permintaan lintas asal. Access-Control-Allow-Headers Mengontrol header respons. Gunakan * untuk mengizinkan semua.	array string
exposeHeaders	Secara default, tidak semua header respons diekspos ke kode JavaScript sisi klien dalam permintaan lintas asal. Header yang diekspos adalah server header tambahan yang dapat disertakan dalam respons. Access-Control-Expose-Headers Mengontrol header respons. Gunakan * untuk mengekspos semua.	array string

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

Mengaktifkan dan mengonfigurasi CORS

1. Buka aplikasi kontainer Anda di portal Azure.

2. Di bawah menu pengaturan, pilih CORS.

   

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

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

Catatan

Pembaruan pada pengaturan konfigurasi melalui baris perintah menimpa pengaturan Anda 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 formulir yang diambil pengaturan CORS Anda dalam templat ARM saat 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 formulir yang diambil pengaturan CORS Anda saat mengonfigurasi aplikasi kontainer 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 tempat penampung yang dikelilingi dengan <> nilai Anda.

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

Langkah berikutnya

Mengonfigurasi ingress