W3 Total Cache and Access-Control-Allow-Origin on Nginx

Scenario: a website hosted on a MediaTemple DV (Apache + Nginx) + MaxCDN.

As you may know, when enabling a CDN on a website including webfonts (via @font-face), some browsers like Firefox and IE will refuse to embed the font (read here).

Read More

In my case, I don’t have no sites-available directory as described here: inuits.eu/blog/not-so-helpful-guide-using-nginx, but I have a config file located at:
/etc/nginx/plesk.conf.d/vhosts/example.com.conf. In this file there is the following line of code:

include "/var/www/vhosts/system/example.com/conf/vhost_nginx.conf";

so I thought to add

location ~ .(ttf|ttc|otf|eot|woff|font.css|css)$ {
add_header Access-Control-Allow-Origin "*";
}

into vhost_nginx.conf

Well, after reloading nginx via terminal, when I execute curl -I http://example.com/wp-content/themes/mytheme/fonts/webfont.woff I finally get a 200 OK response with Access-Control-Allow-Origin: *.

The problem is that, when I empty the cache via W3Total Cache, I get a 404 on CSS minified files (http://example.com/wp-content/cache/minify/000000/aa77d/default.include.d469e2.css ). I am pretty sure that the 404 has to do with that Nginx hack, because if I use instead location ~ .(ttf|ttc|otf|eot|woff|font.css|css|js)$ { I get a 404 also on js files.

I am not sure if that’s fault of a bad configuration or of a W3 Total Cache bug. Any advice?

Related posts