scaricare immagini da Amazon s3 dà errore CORS. (Chrome problema)

Question

sto cercando di recuperare le immagini da Amazon S3 con questi CORS config:

<CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <AllowedMethod>PUT</AllowedMethod> 
    <AllowedMethod>POST</AllowedMethod> 
    <AllowedMethod>DELETE</AllowedMethod> 
    <AllowedHeader>*</AllowedHeader> 
</CORSRule> 

e l'errore che ricevo è:

Image from origin 'https://s3.amazonaws.com' has been blocked from loading by Cross-Origin  Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 

ricevo questo errore in Chrome, ma non in Firefox. Ho provato a navigare ma non ho trovato una soluzione. Qualcuno può aiutarmi con questo?

Grazie

Answer 1

tengo gli occhi su questioni AWS, e vedo questo bel po 'Il problema con questa domanda (e di quelli come lui) è che si espone solo metà dell'equazione (la configurazione CORS) per la comunità. La "C" in MVCE non è certamente soddisfatta.

La metà mancante dell'equazione è come si sta tentando di accedere alla risorsa sul front-end. In particolare, le intestazioni delle richieste da inviare sono critiche.

• Si sta utilizzando fetch? canvas? Amazon SDK? Qualcosa come domtoimage?
• Sono state acquisite le intestazioni di richiesta per la richiesta non valida ?
  • Se sì, perché non sono nella domanda?

---

CORS Basics

Se non si invia un header origin richiesta, non avete intenzione di ottenere le intestazioni di risposta CORS indietro. Se si invia un'intestazione origin e l'origine è consentita, è necessario recuperare le intestazioni CORS. È così semplice.

Quindi l'intestazione origin mancante dovrebbe essere la prima cosa da escludere. Sei assolutamente sicuro di inviare un'intestazione origin? Più spesso, la libreria che stai utilizzando ne manda una? Se si scava un po 'più a fondo, la vera domanda potrebbe essere "perché non è presente un'intestazione origin sulla mia richiesta?"

Nota a margine: È possibile utilizzare un estensione per il browser come Requestly per rimuovere l'intestazione origin da tutte le richieste in uscita, e ammirare tutte le cose che si rompe.

---

Lavori in x, ma non y

Torna alla mia "inviare i vostri header di richiesta" soapbox - Se Chrome e Firefox stanno agendo in modo diverso, Si è verificato che ogni sta inviando lo stesso insieme di intestazioni?

Diverse intestazioni sono impostate per il browser e le implementazioni del browser may make different choices relative a quali intestazioni inviare quando.