White screen error when accessing a website through CDN - CDN - Centro de documentación de Alibaba Cloud

Síntomas

Una página web acelerada por Content Delivery Network (CDN) muestra una pantalla en blanco y no se carga.

Causas

Los errores de pantalla blanca ocurren cuando los recursos estáticos no se cargan correctamente. Si los archivos JavaScript o CSS almacenados en caché en los nodos de CDN devuelven respuestas anómalas, el navegador no puede procesar la página.

Utilice la siguiente tabla para identificar la causa probable y determinar por dónde comenzar:

Síntoma	Causa probable	Comience con
La página está en blanco, pero el HTML se carga	Un archivo JS o CSS en caché devuelve una respuesta inesperada	Paso 1: Compare las respuestas del origen y de CDN
La página falla después de un cambio de configuración de CDN	Una función de CDN (reescritura de URL, seguimiento de redireccionamientos) interfiere con las solicitudes de recursos	Paso 2: Revise las funciones en la consola de CDN
La página falla después de un despliegue en el origen	CDN todavía sirve la versión anterior de un archivo	Paso 3: Actualice la caché

Solución de problemas

Paso 1: Compare las respuestas del origen y de CDN

Cargue la página directamente desde el servidor de origen y luego cárguela a través de CDN. Compare las solicitudes de red para identificar qué recurso devuelve una respuesta anómala.

Opción A: Vinculación mediante archivo hosts + comparación de archivos HAR

Vincule el nombre de dominio a la dirección IP de origen en su archivo hosts local.
Abra la página en una ventana de navegación privada y guarde las solicitudes de red como un archivo HAR.
Elimine la vinculación del archivo hosts para que el tráfico se enrute nuevamente a través de CDN.
Abra la misma página y guarde un segundo archivo HAR.
Compare ambos archivos HAR lado a lado.

Qué buscar en los archivos HAR:

Códigos de estado: Busque recursos que devuelvan 200 desde el origen, pero un código de estado diferente (como 404, 403 o 302) a través de CDN.
Encabezados de respuesta: Compare Content-Type, Content-Length y los encabezados relacionados con la caché. Una discrepancia en Content-Type (por ejemplo, text/html en lugar de application/javascript) indica que CDN está sirviendo un tipo de contenido incorrecto.
Tamaño del cuerpo de respuesta: Un recurso con un cuerpo significativamente más pequeño a través de CDN podría estar devolviendo una página de error en lugar del archivo real.

Opción B: curl --connect-to (prueba rápida)

Para comparar un solo recurso sin modificar el archivo hosts, envíe una solicitud directamente al origen y otra a través de CDN. Ambos comandos usan la misma URL para que la comparación sea directa:

# Request directly from the origin server (replace 203.0.113.1 with your origin IP)
curl -svo /dev/null https://example.com/static/app.js --connect-to ::203.0.113.1

# Request through CDN (normal DNS resolution)
curl -svo /dev/null https://example.com/static/app.js

Compare los códigos de estado HTTP y los encabezados de respuesta en ambas salidas.

Paso 2: Revise las funciones en la consola de CDN

Abra la consola de CDN y revise las funciones que alteran las solicitudes de recursos:

URL rewrite: Compruebe que ninguna regla de reescritura redirija o modifique involuntariamente la ruta de un recurso estático.
Follow 301/302 redirects for origin fetch: Cuando esta opción está habilitada, CDN sigue los redireccionamientos del servidor de origen durante la recuperación. Si el destino del redireccionamiento devuelve contenido inesperado, la respuesta almacenada en caché será incorrecta. Deshabilite esta función para probar si esto resuelve el problema. Para obtener más información, consulte Follow 301/302 redirects for origin fetch.

Paso 3: Actualice la caché

Si el recurso anómalo es un archivo almacenado en caché en CDN, actualice la caché para forzar a CDN a obtener una copia nueva del servidor de origen.

Actualización desde la consola frente a purga forzada mediante API

CDN ofrece dos métodos de actualización de caché. Para solucionar problemas de pantalla blanca, utilice el método de API:

Método	Comportamiento	Cuándo utilizarlo
Consola (actualización de directorio o basada en expresiones regulares)	Marca el contenido en caché como expirado. En la siguiente solicitud, CDN consulta al origen. Si el contenido del archivo no ha cambiado, pero solo sus encabezados de respuesta sí lo hicieron, CDN podría continuar sirviendo el contenido antiguo.	Actualización rutinaria de caché para archivos cuyo contenido ha cambiado en el origen.
Refresh Cache API con `Force` establecido en `true`	Purga el contenido de los nodos de CDN por completo. CDN obtiene y almacena en caché una nueva copia del origen en la siguiente solicitud.	Solución de problemas de pantalla blanca o cualquier escenario donde los encabezados de respuesta cambiaron, pero el contenido del archivo no.

Actualizar la caché mediante la API

Llame a Refresh Cache API (RefreshObjectCaches) con los siguientes parámetros:

Establezca la URL en la ruta del recurso afectado.
Establezca el parámetro Force en true.

Esto purga el contenido de los nodos de CDN por completo, en lugar de solo marcarlo como expirado.

Para obtener más información sobre cómo CDN gestiona la actualización de caché y la precarga, consulte CDN cache refresh mechanism.

Soluciones

Aplique una o ambas de las siguientes correcciones según los hallazgos de su solución de problemas:

Deshabilite Follow 301/302 redirects for origin fetch. Si esta función causa la respuesta anómala, deshabilítela en la consola de CDN. Para obtener detalles de configuración, consulte Follow 301/302 redirects for origin fetch.
Fuerce la actualización de la caché mediante la API. Llame a Refresh Cache API con el parámetro Force establecido en true para purgar el recurso afectado de los nodos de CDN.

Métodos de solución de problemas

Una pantalla blanca suele indicar que los archivos JavaScript (JS) u hojas de estilo en cascada (CSS) cargados por la página son inconsistentes con el contenido de esta. Compare el archivo HTTP Archive (HAR) de una solicitud directa al servidor de origen con el archivo HAR de una solicitud realizada a través de CDN para identificar la discrepancia.
Después de identificar el recurso en caché problemático, púrguelo de la caché de CDN. Si solo cambiaron los encabezados de respuesta, pero el archivo de origen no, use la API para forzar la purga del recurso, ya que una actualización desde la consola solo marca el contenido en caché como expirado sin eliminarlo.

Si el archivo de origen cambia, pero sus encabezados de respuesta no, el contenido en caché en los nodos perimetrales no se actualiza automáticamente.
Revise las configuraciones de redireccionamiento en la consola de CDN, como las reglas de reescritura de URL y la función Follow 301/302 redirects for origin fetch. Estas configuraciones pueden causar errores de carga de recursos cuando el origen utiliza una lógica de redireccionamiento compleja.

Causa

La función Follow 301/302 redirects for origin fetch está habilitada en CDN, lo que provoca que la respuesta de redireccionamiento se almacene en caché. Las solicitudes posteriores del cliente reciben el redireccionamiento en caché en lugar de ser redirigidas al recurso correcto.

Solución

Deshabilite la función Follow 301/302 redirects for origin fetch y luego purge las entradas de caché afectadas.

Fuente de contenido

0002HJBBWX

Productos aplicables

CDN
DCDN

Prevención

Utilice versiones de archivo para los recursos estáticos. Despliegue cada versión con un nombre de archivo versionado (por ejemplo, app.v2.js o app.20260216.js) en lugar de sobrescribir el mismo archivo. Los nombres de archivo versionados aseguran que CDN sirva el nuevo archivo de inmediato, porque la URL es diferente y no existe ninguna copia en caché en los nodos de CDN.