Amazon S3 buckets that are configured to work as public websites can support CORS, allowing assets such as JavaScript modules to be loaded by JavaScript running on other domains.
\nThis configuration happens at the bucket level - it's not something that can be applied to individual items.
\nHere's their documentation. As with so many AWS things it involves hand-crafting a JSON document: the documentation for that format, with useful examples, is here.
\nI opted to use the S3 web console option - find the bucket in the console interface, click the \"Security\" tab and you can paste in a JSON configuration.
\nThe configuration I tried first was this one:
\n[\n {\n \"AllowedHeaders\": [\n \"*\"\n ],\n \"AllowedMethods\": [\n \"GET\"\n ],\n \"AllowedOrigins\": [\n \"https://simonwillison.net/\"\n ],\n \"ExposeHeaders\": []\n }\n]This should enable CORS access for GET requests from code running on my https://simonwillison.net/ site.
\nThe AllowedOrigins key is interesting: it works by inspecting the Origin header on the incoming request, and returning CORS headers based on if that origin matches one of the values in the list.
I used curl -i ... -H \"Origin: value\" to confirm that this worked:
~ % curl -i 'http://static.simonwillison.net.s3-website-us-west-1.amazonaws.com/static/2022/photoswipe/photoswipe-lightbox.esm.js' \\\n -H \"Origin: https://simonwillison.net\" | head -n 20\n-x-amz-request-id: 4YY7ZBCVJ167XCR9\n Date: Tue, 04 Jan 2022 21:02:44 GMT\n-Access-Control-Allow-Origin: *\n-Access-Control-Allow-Methods: GET\n:Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method\n-Last-Modified: Tue, 04 Jan 2022 20:10:26 GMT\n-ETag: \"8e26fa2b966ca8bac30678cdd6af765c\"\n:Content-Type: text/javascript\n-Server: AmazonS3\n\n~ % curl -i 'http://static.simonwillison.net.s3-website-us-west-1.amazonaws.com/static/2022/photoswipe/photoswipe-lightbox.esm.js' | head -n 20\nx-amz-request-id: MPD20P9P3X45BR1Q\nDate: Tue, 04 Jan 2022 21:02:48 GMT\nLast-Modified: Tue, 04 Jan 2022 20:10:26 GMT\nETag: \"8e26fa2b966ca8bac30678cdd6af765c\"\nContent-Type: text/javascript\nServer: AmazonS3\nWith the Origin header on the request it returns the Access-Control-Allow-Origin headers. Without it does not.
I'm running my S3 bucket behind a Cloudflare cache. As you can see above, S3 returns a Vary: Origin header so caches know that they should respect that header when returning cached content.
But... while Cloudflare added support for Vary in September 2021 they only support it for images, not for other file formats! So sadly I don't think you can use CORS for JavaScript modules in this way if you are using Cloudflare.
\nI also tried using \"AllowedOrigins\": [\"*\"] in my S3 configuration, but I found that if you make a request without an Origin header S3 still doesn't return Access-Control-Allow-Origin - so under a cache that does not support Vary you run the risk of caching an asset without those headers.