"Static files" subdomain causes CORS issues

As it is preferable to have the static files served by a server that does not issue cookies etc. I set up my wordpress in domain.com so that it works by calling the static files from static.domain.com

You can see the guide here

All is fine but I have a couple of CORS issues with the fonts that I am using.

To avoid the issue with woff2 fonts I had to make them requested by the domain.com because when served by static.domain.com I am getting errors like this:

I have setup in my origin servers the appropriate CORS directive but still no luck.

Header set Access-Control-Allow-Origin "https://domain.com" Header set Access-Control-Allow-Origin "https://static.domain.com"

I guess I have to add this header in Cloudflare as well.

How can this be done? Please note that I am new to Cloudflare and haven’t worked with workers etc. so please be as explicit as you can.

Thank you.

May I ask, did you add this on your sub.domain.com or domain.com, or on both of your configuration file(s)?

But, as far as you are using WordPress and using Newspapper theme, while calling the files from your sub.domain.com, I am afraid you would have to add/set them at your origin host / server, either by Nginx vhost file for specific MIME-types or inside your location {...} block, or if using Apache, then in the htaccess file.

Without it, if you are serving fonts from your sub-domain, it would also fail due to the CORS.

I am using similar approach, just the sub-domain is cdn.mydomain.com.

I did not have had to set/add it at Cloudflare dashboard at all.

For example, using Nginx, my sub.domain.com vhost file has got (stripped out other MIMe types and alongside other headers):

location ~ \.(woff|woff2|svg|ttf|eot|otf)$ {
    add_header "Access-Control-Allow-Origin" "*";
}

Same, but on my domain.com:

location ~* \.(other|mime|types|here)$ {
    ...
    if ($request_uri ~ ^[^?]*\.(ttf|ttc|otf|eot|woff|woff2|font.css)(\?|$)) {
        ...
        add_header Access-Control-Allow-Origin "*";
        ...
    }
}

Note, I am using asterix * here and also having some woff (font) files served from both my domain.com and some other from sub.domain.com.

1 Like

Thanks so much @fritex ! I will try it and will let you know how it went.

1 Like

This guidance went out the window a long time ago. Prior to HTTP/2 the headers were not compressed, but modern clients support header compression. The performance will be generally better if all the assets come through the same hostname. You also eliminate the issue with CORS by having everything same-site/same-origin.

2 Likes

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.