Ustawianie kontroli dostępu-Allow-Origin w Cloudfront

15

Mam problemy z obsługą zasobów statycznych w przeglądarce Firefox przy użyciu AWS Cloudfront.

Chrome działa idealnie, ale Firefox zwraca błąd CORS.

Jeśli wykonam zawijanie, otrzymuję:

HTTP/1.1 200 OK
Content-Type: application/x-font-opentype
Content-Length: 39420
Connection: keep-alive
Date: Mon, 11 Aug 2014 21:53:50 GMT
Cache-Control: public, max-age=31557600
Expires: Sun, 09 Aug 2015 01:28:02 GMT
Last-Modified: Fri, 08 Aug 2014 19:28:05 GMT
ETag: "9df744bdf9372cf4cff87bb3e2d68fc8"
Accept-Ranges: bytes
Server: AmazonS3
Age: 2743
X-Cache: Hit from cloudfront
Via: 1.1 c445b20dfbf3128d810e975e5d84e2cd.cloudfront.net (CloudFront)
X-Amz-Cf-Id: ...

Który moim zdaniem potrzebuje nagłówka:

Access-Control-Allow-Origin: *

Czy ktoś może mi pomóc? Dlaczego problem dotyczy przeglądarki Firefox, a nie Chrome? Jak mogę to rozwiązać?

Tony
źródło

Odpowiedzi:

18

Po pierwsze, musisz upewnić się, że nagłówek pochodzenia na białej liście:

Jeśli chcesz, aby CloudFront przestrzegał ustawień udostępniania zasobów pochodzących z różnych źródeł, skonfiguruj CloudFront, aby przekazywał nagłówek Origin do Twojego źródła.

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html#request-custom-cors

Zobacz także: http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/

Nawiasem mówiąc, istnieje kilka podobnych pytań na temat błędu serwera / przepełnienia stosu i wielu odpowiedzi.

bjunix
źródło
4

Jest to nieco bardziej skomplikowane, niż wskazuje zaakceptowana odpowiedź.

Obsługa CORS podczas korzystania z Cloudfront + S3 jest faktycznie zaimplementowana w S3 i działa zgodnie z Amazon:

Nagłówek Origin żądania musi pasować do elementu AllowedOrigin.

Metoda żądania (na przykład GET lub PUT) lub nagłówek metody żądania kontroli dostępu w przypadku, gdy żądanie OPCJI w ramach inspekcji wstępnej musi być jednym z elementów dozwolonych.

Każdy nagłówek wymieniony w nagłówku żądania kontroli dostępu do nagłówków żądania wstępnego musi być zgodny z elementem AllowedHeader.

Ma to sens, ponieważ może nie być jasne, że jeśli klient nie wysyła nagłówka Origin, wówczas przetwarzanie nie jest w ogóle wykonywane. A my korzystamy z Cloudfront z przodu, który, jeśli tylko hostujesz statyczne zasoby, prawdopodobnie skonfigurowałeś go tak, aby ignorował wszystkie nagłówki podczas buforowania. Dlatego jeśli pierwsze żądanie do każdego pliku z określonego węzła krawędzi nie zawiera nagłówka Origin, buforuje odpowiedź bez nagłówka Access-Control-Allow-Origin.

W rezultacie pierwsze przychodzące żądanie określi, które nagłówki są zwracane dla wszystkich żądań do momentu wygaśnięcia pamięci podręcznej.

Istnieje kilka sposobów rozwiązania tego problemu.

  • Skonfiguruj Cloudfront, aby wykonywać warunkowe buforowanie na podstawie nagłówka „Origin”.

Działa to dobrze, jeśli oczekujesz tylko kilku lub jednego źródła, ale w przeciwnym razie twój współczynnik buforowania może być naprawdę zły.

  • Użyj Lambda @ edge, aby wymusić ustawienie nagłówków, można to zrobić tylko raz dla każdego żądania źródła (S3).

W pełni elastyczny, ale zwiększa koszty ogólne i koszty.

  • Ustaw chmurę nadpisującą nagłówek „Origin” na wartość zastępczą dla każdego żądania.

Jest to naprawdę przydatne tylko w przypadku „Access-Control-Allow-Origin: *” i jest to trochę hack, ale jest to prawdopodobnie najlepsze obecne rozwiązanie, gdy hostujesz zasoby statyczne na chmurze + S3.

Rasmus Larsen
źródło