CORS 策略已阻止从源访问字体：请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

我的网站有两个问题：

1) 混合内容：“ https://www.mywebsite.com/ ”上的页面通过 HTTPS 加载，但请求了不安全的字体“ http://demo.kallyas.net/ares-furniture-interior-design/wp -content/uploads/sites/6/2016/03/montserrat-light-webfont.woff '。此内容也应通过 HTTPS 提供。

2) 在“ https://kallyas.net/demo-ares/furniture/wp-content/uploads/sites/6/2016/03/montserrat-light-webfont.woff ”处访问字体来自“ https://” www.mywebsite.com ' 已被 CORS 政策阻止：

请求的资源上不存在“Access-Control-Allow-Origin”标头。

我试过了：

<IfModule mod_rewrite.c>
Header set Access-Control-Allow-Origin "*"
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

&

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

Answer 1

将此代码放入您的 .htaccess 文件中并尝试

<IfModule mod_headers.c>
   Header set Access-Control-Allow-Origin "*"
</IfModule>
<FilesMatch ".(eot|ttf|otf|woff)">
   Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Answer 2

您可以将特定标头添加到服务器的响应中，指示浏览器允许通过编辑.htaccess服务器根文件夹（或您的网站所在位置）中的文件来获取特定资源（字体、图像等）：

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css)$">
     Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

正则表达式行(ttf|ttc|otf|eot|woff|woff2|font.css)意味着我们在提供具有此类扩展名的文件和每个以“font”开头并以“css”结尾的CSS文件时将此标头添加到响应中（点代表任何字符，因为它没有转义）。

根据我的经验，这是解决问题最有效且最简单的方法。