I have a Javascript application that is delivered to the browser from a CloudFront endpoint. All static files of the application are hosted in an S3 bucket. That involves a whole bunch of javascript and css files, as well as some font files.
The html loading the entire application is generated and delivered by a server, let's call that server "https://my.domain.com".
As mentioned, this is just the html file. All static content is then downloaded from the cloudfront endpoint, which points to a bucket as its origin. Let's call these xxxx.cloudfront.net, and the bucket my-bucket.
As far as I understand it, pretty much any request from that generated html to the cloudfront endpoint is a CORS request, since the origin of the html is my.domain.com, and all the requested files are clearly not hosted on that domain.
So naturally, I went to set up all the CORS stuff. First of all the bucket is completely public, and it has the following CORS policy:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*",
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
And that seems to work, for everything... except the font files! I probably should mention the folder structure of the bucket. It has three folders, production, development, and common. The contents of these should be rather self-explanatory. Common contains the fonts, as well as some 3rd party javascript libraries. Production and development contain the js and css for their respective environments.
In any case, everything loads, except the font files, for which I get the following error:
Access to font at 'https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2' from origin 'https://my.domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
It struck me as extremely odd that only the font files would have this issue. Other files in the common folder seem to get loaded just fine, and if I just paste https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2 into my browser, it works.
The only difference seems to be that these files are not loaded from the html, but from the css via the @font-face thingy. Looking at the requests generated by the browser when loading the application, I can clearly see that for example the origin header is set, which it wasn't for requesting js or css files. Set-Fetch-Mode is set to "cors", while for the other files it was set to "no-cors".
In any case, I tried to fix the issue at the cloudfront side. First, I added the header "Access-Control-Allow-Origin: *" to the origin configuration. Then I added a behaviour configuration for the origin to allow GET, HEAD, OPTIONS for the path pattern *.
And now... well, now I still have the same problem, and am completely out of ideas, though wondering about Why the request created by @font-face is formed so differently when compared to the requests for javascript and css resources, but most of all, what on earth I can do to load in them bloody fonts?
