时间戳

首页 > 解决方案 > 使用 Apache 虚拟主机和 WordPress 加载本地字体文件的浏览器 CORS 错误

apache - 使用 Apache 虚拟主机和 WordPress 加载本地字体文件的浏览器 CORS 错误

问题描述

我以前在使用虚拟主机时从未遇到过 CORS 问题。通常我可以用静态站点很好地配置它们，但是我在让虚拟主机与 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>

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

CORS 策略已阻止从源“ http://mytheme.local ”访问“ http://localhost/~timothyfisher/wordpress/wp-content/themes/mytheme/fonts/fonticons.woff2 ”的字体：否Access-Control-Allow-Origin' 标头出现在请求的资源上。因此，不允许访问源“ http://mytheme.local ”。

这里发生了什么？

标签： apachecorsvirtualhost

解决方案

发生的事情正是您的错误消息所述。

您的字体位于http://localhost

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

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

这个问题之前已经被问过很多次了 - 请参阅这篇文章以获得已被广泛接受的奇妙语义答案： Access-Control-Allow-Origin 标头如何工作？

推荐阅读