使用Apache虚拟主机和WordPress加载本地字体文件时出现浏览器缓存错误

Question

在使用虚拟主机时，我从未遇到过CORS问题。通常，我可以在静态站点上很好地配置它们，但是我在让虚拟主机使用WordPress时遇到了一些困难。

/etc/主机

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>

我能够通过http://mytheme.local连接到虚拟主机，但是当浏览器试图加载一些本地字体时，我会得到以下控制台错误：

从源'http://localhost/~timothyfisher/wordpress/wp-content/themes/mytheme/fonts/fonticons.woff2‘到字体'http://mytheme.local’的访问已被CORS策略阻止:请求的资源上没有“访问控制-允许-原产地”标题。因此，“http://mytheme.local”源是不允许访问的。

这里发生了什么事？

Answer 1

所发生的正是您的错误消息的状态。

你的字体在http://localhost

您的网站来源是http://mytheme.local

除非您的字体也位于"mytheme.local“，否则您违反了相同的原始策略，因此将不会加载资源。

这个问题已经问过很多次了--请参考这篇文章，得到一个被广泛接受的奇妙的语义答案：How does Access-Control-Allow-Origin header work?。