Used S3 public bucket to serve the JS and CSS requests. All worked well until Font Awesome was used, and got these errors.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3.us-east-2.amazonaws.com/myxyzbucket/fonts/fontawesome-webfont.woff2?v=4.6.2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:1): bad URI or cross-site access not allowed source: https://s3.us-east-2.amazonaws.com/myxyzbucket/fonts/fontawesome-webfont.woff2?v=4.6.2

I triple checked that bucket was already allowed public read access. Researched and decided to try these articles’ approach [1, 2]. In CORS configuration section, the placeholder of the content was greyed out and said it’s the same as bucket policy already. Ignored the info because it didn’t work at this time. Went ahead and typed the configuration myself, saved, and it worked. After tuned it a couple of times, the correct CORS below.

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <MaxAgeSeconds>3000</MaxAgeSeconds>
   <AllowedHeader>Authorization</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

Interesting enough, the correct CORS I finally found was the same as the greyed out placeholder of CORS. Cheers!

References:

  1. https://docs.aws.amazon.com/AmazonS3/latest/user-guide/add-cors-configuration.html
  2. https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
  3. https://stackoverflow.com/questions/15024333/downloadable-font-on-firefox-bad-uri-or-cross-site-access-not-allowed