S3 CORS, zawsze wyślij Vary: Origin

Question

Używam wiadra S3 za Cloudfront z włączonym CORS. Jeśli klient wyśle ​​żądanie z nagłówkiem Origin, to S3 (i cloudfront) zareaguje nagłówkiem "Vary: Origin", jednak jeśli żądanie zostanie wykonane bez nagłówka Origin, odpowiedź nie będzie zawierała Vary Header.

Jest to problematyczne, ponieważ używam zasobu z chmury/s3 w znaczniku img, w którym to przypadku przeglądarka wysyła żądanie bez nagłówka Origin, a następnie tworzy zapytanie ajax dla tego obrazu. Przeglądarka używa następnie buforowanej wersji obrazu, bez nagłówka Access-Control-Allow-Origin i dlatego odrzuca żądanie.

Czy istnieje sposób, aby S3 zawsze zwracało nagłówek "Vary: Origin"?

Answer 1

Innym rozwiązaniem byłoby konfigurowania dystrybucji CloudFront automatycznego włączania dla CORS wnosi do wniosków Cors. Jest to możliwe poprzez dodanie nagłówka CORS do każdego żądania CloudFront wysyła do S3 przy użyciu ostatnio dodaną funkcję CloudFront „Kontrola krawędzi do pochodzenia Nagłówki żądań”.

Zobacz zapowiedź funkcji Tutaj: https://aws.amazon.com/blogs/aws/cloudfront-update-https-tls-v1-1v1-2-to-the-origin-addmodify-headers/

a dokumentacja tutaj: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/forward-custom-headers.html.

Answer 2

Zrobiłem konto, aby odpowiedzieć na twoje pytanie, ponieważ w przypadku tego rodzaju problemu istnieje niewiele dobrych odpowiedzi (i kilka podobnych).

opisać problem się z jakiegoś powodu głównie w Chrome, FF i IE wydaje się być na tyle mądry, by nie udostępniać pamięci podręcznej między AJAX i regularnych połączeń w tych przypadkach.

Problem

Spójrzmy najpierw opisać dlaczego problem się dla przyszłych czytelników:

• Browser (Chrome) zwrócić się do serwera przy użyciu zwykłego <img> lub <script> tag. Jeśli serwer znajduje się w tej samej domenie, nie zawiera nagłówków CORS.
• Serwer (S3) zwraca zasób. Jeśli w żądaniu nie ma nagłówka Origin, nie dołącza on nagłówków CORS do odpowiedzi, ponieważ są one nadmiarowe.
• Browser (Chrome) i spróbuj ponownie uzyskać zasobu za pomocą AJAX, ale tym razem naprawdę nie iść do serwera, ale wygląda na pamięci podręcznej zasobu.
• Browser (Chrome) Wersja buforowane nie ma nagłówków Cors. Spowoduje to odrzucenie żądania jako naruszenie Access-Control-Allow-Origin lub inne powiązane problemy.

Rozwiązanie

w HTML5 istnieje atrybut o nazwie crossorigin, który można dodać do tagów oznaczać, że trzeba wysłać informacje dotyczące pochodzenia. Możliwe wartości crossorigin='anonymous' i crossorigin='use-credentials' są zupełnie bez znaczenia na pytanie, ale jak mówi w dokumentacji:

Domyślnie (to znaczy, gdy atrybut nie jest określony), CORS nie jest w ogóle używany.

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

Więc wystarczy utworzyć tagi graficzne takie jak ta <img src='cloundfront.path' crossorigin='use-credentials'>

to wszystko. Jest to dość niejasne, więc mam nadzieję, że ta odpowiedź pozwoli zaoszczędzić trochę czasu badawczego grupie ludzi.