CORS headers

Relevant selections for this article:

When using certain assets, for example web fonts, or making ajax or fetch requests browsers enforce the same origin policy. This means that the request must be to the same domain as the page that requested it. This is done for security and copyright reasons, however browser makers understand that there are situations where cross origin requests are desirable so they provide a mechanism for whitelisting domains which are allowed to access a resource on your server. This is the purpose of the CORS header, to specify to browsers that it is ok for them to make requests to a remote domain. You can read more on the topic on MDN.

In this document we will be describing how to configure Nginx to allow cross origin requests to static assets, as headers for dynamic assets are controlled by your app.

Table of contents

• Loading...

Conceptual overview

The setup works as follows:

1. Nginx is configured to serve static assets.
2. Nginx is configured to add a header allowing specific domains when serving specific assets.
3. The client browser receives a permissive header when requesting the assets.

Step 1: Configure Nginx to serve your static files:

Ensure you have your web server configured to serve your static files.

root /path/to/your/app/public;

Step 2: Configure Nginx to send CORS headers.

You will need to know the domain from which the requests will be coming. If you have no way of knowing you can allow all domains by using "*" but this should be avoided if at all possible. What the example configuration below does is matches common font extensions and adds the CORS headers to only those requests. It is a best practice to limit CORS headers to only those requests for which they are needed.

if ($request_filename ~ "^.+(eot|svg|ttf|otf|woff2|woff)$") {
    add_header "Access-Control-Allow-Origin" "https://other.domain.tld";
    add_header "Access-Control-Allow-Methods" "POST, GET, OPTIONS";
}

Then restart Nginx.

Step 3: testing

You should now be able to run something like the following command, using a url valid to your site to confirm the header is set.

curl -s -I https://original.domain.tld/fonts/myFont.woff | fgrep Access