Cross-Origin Request Blocked error

Last modified
Sunday, February 12, 2017 - 07:34

You might have crossed through this error a lot when developing web apps sharing multiple domain names for the same app and it usually triggers when app with domain name A tries to grab images/fonts/audio and somo other files from the same app with domain name B. Cross-Origin Request defines a way for browsers to share content in a secure way preventing your site of Cross Site Scripting attacks. But sometimes you do have apps that require multiple domain names and the resources must be shared between these in the same network so you know that content sharing is secure.


Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://mysite.com/sites/all/themes/mysite/js/slick/slick/fonts/slick.woff. This can be fixed by moving the resource to the same domain or enabling CORS.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://mysite.com/sites/all/themes/mysite/js/slick/slick/fonts/slick.ttf. This can be fixed by moving the resource to the same domain or enabling CORS.

In order to solve this issue you need to enable the Access Control Headers on Apache or Nginx, to do so you have the next options:

APACHE
  • By enabling it on a .htaccess file so all the "\.(ttf|otf|eot|woff|jpg|png)$" files will be shared between subdomains. Edit accroding to your needs
# Fix Slick Font and Cross-Origin Request Blocked issue
<FilesMatch "\.(ttf|otf|eot|woff)$"> 
  Header set Access-Control-Allow-Origin "*" 
</FilesMatch>

  • By enabling it on your VirtualHost definition on the Directory directive

<directory /var/www>
  Options Indexes FollowSymLinks
  AllowOverride None
  Require all granted
  Header set Access-Control-Allow-Origin "*"
</directory>

NGINX
  • By enabling it on with the Location directive, it can be globally on your nginx.conf or per Vhost as well

location ~* ^.+\.(?:css|cur|js|jpe?g|gif|htc|ico|png|html|xml|otf|ttf|eot|woff|svg)$ {
  ##CORS
  add_header Access-Control-Allow-Origin *;
  ..
  ..
  ..
}

Once you add this entry, restart your web server and you will need to refresh your browser's cache also in order to see the issue fixed.

Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.