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

【问题标题】：Access to font at from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resourceCORS 策略已阻止从源访问字体：请求的资源上不存在“Access-Control-Allow-Origin”标头
【发布时间】：2023-04-07 18:57:01
【问题描述】：

我的网站有两个问题：

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://www.mywebsite.com”访问“https://kallyas.net/demo-ares/furniture/wp-content/uploads/sites/6/2016/03/montserrat-light-webfont.woff”处的字体已被 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"

【问题讨论】：

标签： wordpress

【解决方案1】：

您可以通过编辑服务器根文件夹（或您的网站所在位置）中的.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文件（点代表任何字符，因为它没有被转义）。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：