Fixing CORS errors

Last Updated -


By default Pagely adds CORS headers on ARES for webfonts such as "eot|otf|svg|ttc|ttf|woff2". If additional CORS headers are needed, add one of the options listed below. If there are any security concerns about using the wildcard option, we suggest to look over the CORS documentation here and determine the best option for your site. 


You might see an error similar to the message below on your site (when using your browser's developer tools):

Font from origin 'http://yourcdnurl.pcdn.co' 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.yourdomain.com' is therefore not allowed access.

To fix the error, you just need to add the following to your site's wp-config.php:

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods: GET, PUT, DELETE, OPTIONS");

Or you can try updating your .htaccess file to include the following rules to allow the webfonts/files to load:

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
<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>
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
<IfModule mod_headers.c>
  <FilesMatch "\.(font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Note: If you are using Nginx-Only mode, add a file such as cors-nginx.conf within "/data/s*/dom*/user/nginx-server/" with the following:

location ~ \.(font.css|css|js)$ {
   add_header 'Access-Control-Allow-Origin' '*';
}

Related Topics

Pagely is the Managed WordPress Hosting Platform designed to exceed the needs of media, business, and Enterprise customers alike. We help the world's biggest brands scale WordPress.

Copyright © 2006-2017 Pagely, Inc. All rights reserved.
Pagely® and WordPress® are registered trademarks.

Pagely
Powered by Zendesk