Access-Control-Allow-Origin FilesMatch not working for types other than EOT

Question

I'm serving resources for my site from a cookieless domain. This is being blocked for cross-site reasons in Chrome and Firefox

Redirect at origin 'http://static.domain.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.domain.com' is therefore not allowed access.

So I've added the following to the htaccess file to enable CORS

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js|svg)$”>
    Header set Access-Control-Allow-Origin “*”
  </FilesMatch>
</IfModule>

For some reason this does not work properly - eot files return the correct header, but ttf, woff, and svg don't. I'm slightly mystified as to why! Have I made some mistake the syntax?

EOT header

Access-Control-Allow-Origin *
Date    Sun, 25 Oct 2015 19:41:30 GMT
Last-Modified   Sat, 24 Oct 2015 10:22:45 GMT
Server  cloudflare-nginx
CF-RAY  23b066397718352a-LHR
Content-Type    application/vnd.ms-fontobject

TTF header

Date    Sun, 25 Oct 2015 21:57:58 GMT
Last-Modified   Sat, 24 Oct 2015 10:22:44 GMT
Server  cloudflare-nginx
Content-Type    application/x-font-ttf
Cache-Control   max-age=31104000
Accept-Ranges   bytes
CF-RAY  23b12e202e1735ea-LHR
Content-Length  199248
Expires Wed, 19 Oct 2016 21:57:56 GMT

Answer 1

I notice ttf is cached whereas eot is not. As you are using cloudfare it has most likely followed those caching directives and so is serving up the cached version.

See here for more info and potentially how to resolve: https://support.cloudflare.com/hc/en-us/articles/203063414-Why-can-t-I-see-my-CORS-headers-