Geek Answers Handbook

AWS: How to allow multiple domains in a S3 CORS configuration?

I am having a problem on many of my sites that rely on S3 as the source for Cloudfront. However, I am having problems resolving multiple domains (instead of global * ).

I completed the documentation here (first configuration). And found some other random SO or forum answers here and there (second configuration)

Any help is appreciated.

I have CORS rules set up that look like the following:

 <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>https://example.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>http://example.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>https://staging.example.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>http://example.dev</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>

AND

 <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>https://example.com</AllowedOrigin> <AllowedOrigin>http://example.com</AllowedOrigin> <AllowedOrigin>https://staging.example.com</AllowedOrigin> <AllowedOrigin>http://example.dev</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>

I get a font origin error on all sites except https://example.com :

The font from the source ' http: // CLOUDFRONTURL ' was blocked from downloading under the Cross-Origin resource sharing policy: No 'Access-Control-Allow The -Origin' header is present on the requested resource. The origin of http://example.dev 'is therefore not allowed.

and

The font from the source ' http: // CLOUDFRONTURL ' was blocked from loading by the Cross-Origin resource sharing policy: 'Access-Control-Allow The -Origin' header has the value https://example.com ', which does not match the specified start. http://example.dev 'is therefore not allowed.

+7
source share
2 answers

CloudFront caches objects based on all the request headers that it redirected from the browser to the source server, and not just the path.

For a response to be served from the cache, it must be returned in response to a previous request, which included the same request headers.

This is due to the fact that, at least in principle, different headers can initiate different server behavior, and a full-fledged cache has no right to assume otherwise.

To increase the cacheability of objects without jeopardizing its ability to serve the correct answers (that is, the identical response that the source server would return for this request), CloudFront blocks almost the request headers before sending the request to the beginning, and uses a split version of the request when performing a search in cache.

When the source server is a "Custom" source (i.e. not S3), you can choose which headers to forward to the source server.

But when the source server is S3, you still have a choice, but there are only three that can be redirected by choice ... and they are all CORS related.

[With the start of S3], you can configure CloudFront to forward and cache your objects based on only three headers: Access-Control-Request-Headers , Access-Control-Request-Method and Origin . Forwarding these headers allows CloudFront to distribute content to websites that are allowed to share resources across multiple resources (CORS). You cannot configure CloudFront to forward custom headers to Amazon S3.

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web

If the Origin: header is at least not redirected, then S3 will not be able to respond to it. Enabling forwarding of this header means that not only S3 will see it and will potentially change its response due to the CORS configuration in the bucket, but also that each Origin: option Origin: - for the same object - will lead to another (and correct) the response is returned by S3 and cached for future CloudFront compliance requests.

Custom headers cannot be redirected to S3 CloudFront because it is impractical - since S3 stores static content, the responses will not be different from other headers, so forwarding them will be pointless and reduce the speed of getting into the cache, and many (presumably) different answers are cached, but only served in response to requests that are accompanied by identical headers.

+4
source

More articles:


All Articles