0

I've never ran into CORS issues when using virtual hosts before. Normally I'm able to configure them just fine with static sites, but I'm having some trouble getting a virtual host to work with WordPress.

/etc/hosts

127.0.0.1       localhost mytheme.local
255.255.255.255 broadcasthost
::1             localhost

/etc/apache2/extra/httpd-vhosts.conf

<VirtualHost *:80>
    DocumentRoot "/Users/timothyfisher/Sites/wordpress"
    ServerName mytheme.local

    <Directory "/Users/timothyfisher/Sites/wordpress/">
        Options +FollowSymLinks
        AllowOverride All
        Require all granted

        Header set Access-Control-Allow-Origin "*"
    </Directory>
</VirtualHost>

I'm able to connect to the virtual host through http://mytheme.local, but I'm getting the following console error when the browser attempts to load some local fonts:

Access to Font at 'http://localhost/~timothyfisher/wordpress/wp-content/themes/mytheme/fonts/fonticons.woff2' from origin 'http://mytheme.local' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mytheme.local' is therefore not allowed access.

What's going on here?

Timothy Fisher
  • 1,001
  • 10
  • 27

1 Answers1

0

What's going on is exactly what your error message states.

Your font is at http://localhost

Your website origin is http://mytheme.local

Unless your font is also at "mytheme.local" you are violating the same origin policy and therefor the resource will not be loaded.

This question has been asked on SO many times before - please refer to this post for a fantastic semantic answer that has been widely accepted: How does Access-Control-Allow-Origin header work?

tremor
  • 3,068
  • 19
  • 37