Partekatu honen bidez:


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 encabezado Access-Control-Allow-Credentials.
Antigüedad máxima Configura el encabezado de respuesta Access-Control-Max-Age para indicar cuánto tiempo (en segundos) se pueden almacenar en caché los resultados de una solicitud de pre-piloto 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 respuesta Access-Control-Allow-Origin. Use * para permitir todo.
Métodos permitidos Lista de métodos de solicitud HTTP permitidos en solicitudes entre orígenes. Controla el encabezado de respuesta Access-Control-Allow-Methods. Use * para permitir todo.
Encabezados permitidos Lista de los encabezados permitidos en las solicitudes entre orígenes. Controla el encabezado de respuesta Access-Control-Allow-Headers. 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 respuesta Access-Control-Expose-Headers. Use * para exponer todo.
Propiedad Explicación Tipo
allowCredentials Indica si se va a devolver el encabezado Access-Control-Allow-Credentials. boolean
maxAge Configura el encabezado de respuesta Access-Control-Max-Age para indicar cuánto tiempo (en segundos) se pueden almacenar en caché los resultados de una solicitud de pre-piloto 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 respuesta Access-Control-Allow-Origin. 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 respuesta Access-Control-Allow-Methods. Use * para permitir todo. Matriz de cadenas
allowedHeaders Lista de los encabezados permitidos en las solicitudes entre orígenes. Controla el encabezado de respuesta Access-Control-Allow-Headers. 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 respuesta Access-Control-Expose-Headers. 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 de contenedor en Azure Portal.

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

    Captura de pantalla que muestra cómo habilitar CORS en Azure Portal.

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:

Las actualizaciones de las opciones de configuración a través de la línea de comandos sobrescriben 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.

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": []
              } 
          } 
      } 
  } 
}

Pasos siguientes