Fixing CORS font errors on a Runcloud server

If you’ve ever needed to serve fonts from a web server to a remote application, then you’ve probably run into Cross-Origin Resource Sharing (CORS) errors. When you view a web page that is attempting load fonts from your server, your browser console displays an error message similar to this:

Access to https://my-server.com/font.woff from origin https://remote-server has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the required resource.

The problem can be fixed by adding an Access-Control-Allow-Origin header to the font file, which allows access from the remote application.

Note: Instructions below this point are specific to Runcloud and won’t work for other NGINX configurations.

If you’re operating a Runcloud server then you need to edit NGINX configuration files to add that header. Runcloud already adds a location block for static files to your app’s main.conf:

location ~ .(ico|css|gif|jpe?g|png|gz|zip|flv|rar|wmv|avi|css|js|swf|png|htc|mpeg|mpg|txt|otf|ttf|eot|woff|woff2|svg)$ {
    expires     1M;
    include /etc/nginx-rc/conf.d/your-app-name.d/headers.conf;
    add_header  Cache-Control "public";
    include /etc/nginx-rc/extra.d/your-app-name.location.static.*.conf;
    try_files $uri @proxy;
}

Runcloud’s documentation explains that you should never edit that file directly, since your changes might be overwritten, but you can hook into the include near the end of the block to create a nested location for fonts.

Issue the following command to create a new NGINX configuration file, remembering to replace <your-app-name> with the name of your Runcloud web application:

touch /etc/nginx-rc/extra.d/<your-app-name>.location.static.cors.conf

Then open that file in a text editor such as nano:

nano /etc/nginx-rc/extra.d/<your-app-name>.location.static.cors.conf

Paste the following location block into the file you just created, again remembering to customise <your-app-name>:

location ~ .(ttf|eot|woff|woff2)$ {
    # Include default Runcloud headers for static files
    include /etc/nginx-rc/conf.d/<your-app-name>.d/headers.conf;
    add_header Cache-Control "public";

    # Allow fonts to be accessed from remote applications
    add_header Access-Control-Allow-Origin *;
}

This location block uses a regular expression, indicated by the ~ modifier, to target files with a font extension, and adds an Access-Control-Allow-Origin with a wildcard * value. The wildcard means that any domain can access the font. You could specify a domain instead.

You will notice that we have included Runcloud’s default headers too. NGINX’s add_header nukes any headers defined outside the current scope, so we need to re-add them.

After saving the file, reload NGINX’s configuration by issuing the following command:

systemctl reload nginx-rc

You should notice that an Access-Control-Allow-Origin header is added to fonts when they are served. You can use cURL to test this from the command line:

curl -I https://my-server.com/path/to/font.woff