Configuración del uso compartido de recursos entre orígenes (CORS) para Azure Container Apps

De forma predeterminada, se bloquean las solicitudes realizadas a través del explorador a un dominio que no coincide con el dominio de origen de la página. Para evitar esta restricción para los servicios implementados en Container Apps, puede habilitar CORS.

En este artículo se muestra cómo habilitar y configurar CORS en la aplicación contenedora.

A medida que habilite CORS, puede configurar las siguientes opciones:

Configuración	Explicación
Permitir credenciales	Indica si se va a devolver el Access-Control-Allow-Credentials encabezado.
Antigüedad máxima	Configura el Access-Control-Max-Age encabezado de respuesta para indicar cuánto tiempo (en segundos) se pueden almacenar en caché los resultados de una solicitud de pre-vuelo de CORS.
Orígenes permitidos	Lista de los orígenes permitidos para las solicitudes entre orígenes (por ejemplo, https://www.contoso.com). Controla el encabezado de Access-Control-Allow-Origin respuesta. Use * para permitir todo.
Métodos permitidos	Lista de métodos de solicitud HTTP permitidos en solicitudes entre orígenes. Controla el encabezado de Access-Control-Allow-Methods respuesta. Use * para permitir todo.
Encabezados permitidos	Lista de los encabezados permitidos en las solicitudes entre orígenes. Controla el encabezado de Access-Control-Allow-Headers respuesta. Use * para permitir todo.
Exponer encabezados	De forma predeterminada, no todos los encabezados de respuesta se exponen al código JavaScript del lado cliente en una solicitud entre orígenes. Los encabezados expuestos son servidores de encabezados adicionales que pueden incluirse en una respuesta. Controla el encabezado de Access-Control-Expose-Headers respuesta. Use * para exponer todo.

Propiedad	Explicación	Tipo
allowCredentials	Indica si se va a devolver el Access-Control-Allow-Credentials encabezado.	boolean
maxAge	Configura el Access-Control-Max-Age encabezado de respuesta para indicar cuánto tiempo (en segundos) se pueden almacenar en caché los resultados de una solicitud de pre-vuelo de CORS.	integer
allowedOrigins	Lista de los orígenes permitidos para las solicitudes entre orígenes (por ejemplo, https://www.contoso.com). Controla el encabezado de Access-Control-Allow-Origin respuesta. Use * para permitir todo.	Matriz de cadenas
allowedMethods	Lista de métodos de solicitud HTTP permitidos en solicitudes entre orígenes. Controla el encabezado de Access-Control-Allow-Methods respuesta. Use * para permitir todo.	Matriz de cadenas
allowedHeaders	Lista de los encabezados permitidos en las solicitudes entre orígenes. Controla el encabezado de Access-Control-Allow-Headers respuesta. Use * para permitir todo.	Matriz de cadenas
exposeHeaders	De forma predeterminada, no todos los encabezados de respuesta se exponen al código JavaScript del lado cliente en una solicitud entre orígenes. Los encabezados expuestos son servidores de encabezados adicionales que pueden incluirse en una respuesta. Controla el encabezado de Access-Control-Expose-Headers respuesta. Use * para exponer todo.	Matriz de cadenas

Para obtener más información, consulte la referencia del Grupo de trabajo de tecnología de aplicaciones de hipertexto web (WHATWG) en respuestas HTTP válidas desde una solicitud de captura.

Habilitación y configuración de CORS

1. Vaya a la aplicación contenedora en Azure Portal.

2. En el menú de configuración, seleccione CORS.

   

Con CORS habilitado, puede agregar, editar y eliminar valores para Orígenes permitidos, Métodos permitidos, Encabezados permitidos y Exponer encabezados.

Para permitir cualquier valor aceptable para métodos, encabezados o orígenes, escriba * como valor.

Nota:

Novedades a las opciones de configuración a través de la línea de comandos sobrescribe la configuración actual. Asegúrese de incorporar la configuración actual a los nuevos valores de CORS que desee establecer para asegurarse de que la configuración sigue siendo coherente.

Plantilla ARM

El código siguiente representa la forma en que la configuración de CORS toma una plantilla de ARM al configurar la aplicación contenedora.

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

YAML

El código siguiente representa el formato que toma la configuración de CORS al configurar la aplicación contenedora.

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

Después de agregar valores específicos a la configuración, puede usar az containerapp ingress cors update para establecer la configuración de CORS para la aplicación contenedora.

Antes de ejecutar el comando siguiente, reemplace los marcadores de posición rodeados por <> los valores.

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

Pasos siguientes

Configuración de la entrada