An Introduction to Cross-Origin Resource Sharing (CORS)

Building a Simple CORS Policy on Nginx

On vCanopy Nginx you have the option of either creating a CORS Policy on a website-by-website basis, or you can create one for all of the sites on your server.

An example of when all sites on a server may make sense would be if all your websites were being loaded by the same CDN. If the CORS policy you’re creating doesn’t apply to all websites then you should only implement it on a per website basis.

Step 1. Defining the rules

First, you need to decide exactly what files you’re going to allow access to. For the few applicable WordPress use cases, simply clearing the existing header and adding the  following is the simplest solution:

more_clear_headers "Access-Control-Allow-Origin";
more_set_headers "Access-Control-Allow-Origin: *";

However, you can specify the file types you want to modify your access control policy as follows:

location ~* \.(eot|ttf|woff|woff2|font.css|css|js|gif|png|jpe?g|svg|ico|webp)$ {
more_clear_headers "Access-Control-Allow-Origin";
more_set_headers "Access-Control-Allow-Origin: https://domain.com";
}

The above allows all of those filetypes to be accessible to any external domain.

You can further narrow down to specific resources like as follows:

location ~* \.(eot|ttf|woff|woff2)$ {
more_clear_headers "Access-Control-Allow-Origin";
more_set_headers "Access-Control-Allow-Origin: https://domain.com";
}

The above narrows files types down to only allow font files to be accessible by https://specifidomain.com. No other domains can access those files, and this domain cannot access any other filetypes on your server.

Step 2. Connect to your server

To get started, please see the following guides if you haven’t connected to one of your servers before:

Step 1. Generate your SSH Key

Step 2. Add your SSH Key to vCanopy (also see Add default SSH Keys)

Step 3. Connect to your server by SSH as Root user (we like and use Termius)

If you’re setting up a CORS policy for a specific site, follow the steps in 3.1. If you’re setting up a policy for all the websites on a server, skip 3.1 and follow the steps in 3.2 a little further down.

3.1 Site Specific CORS Policy

Once connected, navigated to your website’s Nginx folder with the following command (replacing “site.url” with your domain):

cd /var/www/site.url/nginx

Create a file named cors-main-context.conf with the following:

nano cors-main-context.conf

Add your code block to the file, and then save it with CTRL+O and then Enter. You can now exit nano with CTRL+X. Now proceed to step 4.

3.2 CORS Policy for ALL websites

nano /etc/nginx/extra.d/cors-main-context.conf

Add your code block to the file, and then save it with CTRL+O and then Enter. You can now exit nano with CTRL+X.

Step 4. Check your Nginx Syntax and Reload Nginx

We now need to test our nginx syntax with:

nginx -t

If there are no errors present, reload nginx with the following command:

gp ngx reload

Your header is now in place.

Step 5. Clear ALL Website Caches

To ensure your header is served, clear all your website caches and any CDN level caches (including Cloudflare if applicable).

You can now check your site.

Further Reading

If you’d like further reading on CORS, I highly recommend you check out Mozilla’s article on the topic:

Mozilla: Cross-Origin Resource Sharing (CORS)