php - CORS 与 php(WordPress)

Question

我已经使用 Wordpress 重新启动了我的网站。不幸的是，有几种字体在 Chrome、Firefox 和 IE 中都没有显示。我收到以下错误:

Access to Font at 'MY WORDPRESS FONTS URL' from origin 'http://w8qb4xj6s.homepage.t-online.de' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.obstgut-auf-der-heide.de' is therefore not allowed access.

这可能是因为我已将 Wordpress 安装在一个子目录中，但随后通过将 index.php 复制到根目录将其“移动”到根目录(我希望在请求主页 URL 时显示新网站)。

为了修复丢失的字体，我尝试将以下代码之一添加到 header.php 和 wp-blog-header.php:

header("Access-Control-Allow-Origin: *");

---

或

Header set Access-Control-Allow-Origin: *
Header set Access-Control-Allow-Headers: Content-Type, Depth, 
    User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-   
Name, Cache-Control
Header set Access-Control-Allow-Credentials: true
Header set Access-Control-Allow-Methods: OPTIONS, GET, POST

---

或

var invocation = new XMLHttpRequest();
var url = 'http://www.obstgut-auf-der-heide.de/';

function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true;
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
}

---

我还用主页 URL 替换了“*”。没有任何效果。我对这整个事情很陌生，对 php 和其他东西知之甚少。但也许你们中的一个人知道我还能尝试解决这个问题吗？我将不胜感激!!!!

谢谢，埃琳娜

Answer 1

这里的问题似乎是您之前在与 WordPress 安装相同的域中拥有这些字体。现在字体位于不同的域(可能还有不同的服务器)，您需要在处理字体的服务器上设置 Access-Control-Allow-Origin header ，而不是服务 WordPress 的服务器。

在 Nginx 上它会是这样的:

location ~ \.(eot|ttf|otf|woff)$ {
  add_header Access-Control-Allow-Origin *;
}

在 Apache 的 .htaccess 上，它将与您上面所做的完全相同，但您应该将此 header 限制为字体文件:

AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf        .ttf
AddType application/x-font-opentype   .otf
AddType application/font-woff         .woff

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