Perché le immagini non vengono caricate tramite CloudFront?

Breve descrizione

Le immagini possono essere bloccate a causa di problemi di autorizzazione o configurazione o a causa di un errore 403 o 404.

Per determinare se un messaggio di errore impedisce il caricamento delle immagini, apri gli strumenti di sviluppo del tuo browser. Nella scheda Rete, individua le chiamate di rete per la richiesta di immagine. Nell'intestazione di risposta per la richiesta, verifica la presenza di un codice di errore 404 o 403.

Se il valore di Server è impostato su un nome server Amazon Simple Storage Service (Amazon S3) o su un nome di server di origine personalizzato, l'origine restituisce il codice di errore.

Risoluzione

CloudFront non ha l‘autorizzazione per accedere all'origine di Amazon S3

Se hai configurato l'identità di accesso origine (OAI) in CloudFront per accedere alle immagini da un endpoint REST API di Amazon S3, verifica che il bucket disponga di una policy del bucket che concede l'accesso OAI al contenuto nel bucket. Senza la policy, quando viene effettuata una richiesta da CloudFront, viene restituito un errore 403: Accesso negato e l'immagine non viene caricata.

Per risolvere questo errore, controlla le autorizzazioni della policy del bucket S3.

L'immagine non esiste nell'origine S3 o nell'origine personalizzata

Se il file immagine richiesto non esiste nel bucket o viene inserito in una cartella diversa, viene restituito un errore 403 o 404. L'errore restituito dipende dalle autorizzazioni del bucket S3:

• Se disponi dell'autorizzazione s3:ListBucket sul bucket, Amazon S3 restituisce un errore 404: Chiave non presente.
• Se non disponi dell'autorizzazione s3:ListBucket, Amazon S3 restituisce un errore 403: Accesso negato.

Il modello del percorso del comportamento indirizza la richiesta a un'origine o una cartella non corrette

Se la tua distribuzione ha più comportamenti con schemi di percorso diversi, l'immagine potrebbe essere indirizzata a un'origine non corretta o a una cartella in cui il file non esiste. In questo caso, viene visualizzato un errore 404.

Per risolvere questo errore, rivedi il comportamento e lo schema di percorso per la tua distribuzione. Verifica che la richiesta arrivi al comportamento corretto corrispondente al modello di percorso e sia indirizzata all'origine corretta.

Ad esempio, nella configurazione seguente, Behavior1 ha il modello di percorso "test" che instrada la richiesta all'origine S3. Behavior2 ha il modello di percorso "Default(*)" che instrada il traffico all'origine Elastic Load Balancing (ELB).

Behavior1: Path pattern = test ====> S3 origin 
Default Behavior: Path pattern = Default (*)=====> ELB origin

Quando viene effettuata una richiesta per "https://example.com/test/myimage.png", la distribuzione corrisponde al percorso con il modello di percorso di Behavior2 Default (*). La richiesta non corrisponde a test del modello di percorso Behavior1 perché non è presente alcun carattere jolly alla fine di test. Senza un carattere jolly, questa richiesta corrisponde al modello di percorso per il comportamento predefinito ed è diretta all'origine ELB. Poiché l'oggetto non esiste nell'origine ELB, la richiesta restituirà un errore 404 e l'immagine non verrà caricata.

Le impostazioni della cache del comportamento non sono configurate per intestazioni, cookie o stringhe di query

L'origine può richiedere il passaggio di una determinata intestazione, cookie o stringhe di query nella richiesta per servire le immagini richieste. In questo caso, quando una richiesta viene effettuata utilizzando CloudFront, le immagini non vengono caricate. Tuttavia, se la stessa richiesta viene effettuata direttamente all'origine, la richiesta ha esito positivo e l'origine restituisce le risorse richieste.

Per risolvere il problema, determina se l'origine richiede determinate intestazioni, cookie o stringhe di query per elaborare la richiesta. Quindi, assicurati che i requisiti siano consentiti nelle impostazioni della cache del comportamento.

Utilizza una policy di richiesta di origine per consentire i valori (intestazioni, cookie e stringhe di query) inclusi nelle richieste che CloudFront invia alla tua origine. Puoi inoltre utilizzare le impostazioni della cache legacy.

I metadati per l'immagine non sono impostati correttamente sull'origine

Se i metadati per Content-Type nell'origine non sono impostati su image/png, l'immagine verrà scaricata invece di essere visualizzata nel tuo browser.

Per risolvere questo problema, controlla i metadati di Content-Type. Se necessario, aggiorna il valore a image/png per le immagini in un'origine S3 o personalizzata.

L'errore CORS fa sì che le immagini non vengano caricate

Se la configurazione CORS in CloudFront o l'origine non sono impostati correttamente, viene visualizzato l'errore: "Nessuna intestazione 'Access-Control-Allow-Origin' presente sulla risorsa richiesta".

Per risolvere questo problema, verifica che la configurazione CORS sia configurata sia per CloudFront che per l'origine. Per ulteriori informazioni, consulta In che modo è possibile risolvere l'errore "Nessuna intestazione 'Access-Control-Allow-Origin' presente nella risorsa richiesta" di CloudFront?

---