具有php的CORS (Wordpress)

Question

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

从原点“http://w8qb4xj6s.homepage.t-online.de/”到字型的访问已被CORS策略阻止:请求的资源上没有“访问-控制-允许-原产地”标题。因此，“http://www.obstgut-auf-der-heide.de/”源是不允许访问的。

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

为了修复丢失的字体，我尝试在header.php和wp blog er.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(); 
  }
}

我还将"*“替换为home-URL。什么都没用。我对这件事非常陌生，不太了解php之类的东西。但也许你们中有人知道我还能做些什么来解决这个问题？？我会非常感激的！

谢谢，埃琳娜

Answer 1

这里的问题似乎是，您以前在与WordPress安装相同的域上安装了字体。既然字体位于不同的域(可能还有不同的服务器)，您需要在处理字体的服务器上设置Access-Control-Allow-Origin头，而不是为WordPress服务的。

在Nginx上应该是这样的：

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

在Apache的.htaccess上，它将与上面所做的完全一样，但是您应该将这个头限制在字体文件上：

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>

Answer 2

我今天也面临着同样的问题，我能够解决下面的链接https://thoughtsandstuff.com/wordpress-rest-api-cors-issues/

将此添加到您的WordPress function.php文件中，您将被设置！

add_action('init', 'handle_preflight');
function handle_preflight() {
    $origin = get_http_origin();
    if ($origin === 'https://yourfrontenddomain') {
        header("Access-Control-Allow-Origin: yourfrontenddomain");
        header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
        header("Access-Control-Allow-Credentials: true");
        header('Access-Control-Allow-Headers: Origin, X-Requested-With, X-WP-Nonce, Content-Type, Accept, Authorization');
        if ('OPTIONS' == $_SERVER['REQUEST_METHOD']) {
            status_header(200);
            exit();
        }
    }
}
add_filter('rest_authentication_errors', 'rest_filter_incoming_connections');
function rest_filter_incoming_connections($errors) {
    $request_server = $_SERVER['REMOTE_ADDR'];
    $origin = get_http_origin();
    if ($origin !== 'https://yourfrontenddomain') return new WP_Error('forbidden_access', $origin, array(
         'status' => 403
    ));
    return $errors;
}

Answer 3

我也遇到了同样的问题，但图标的解决办法目前是这样的：

根据主机服务的不同，根目录中应该有一个.htaccess文件(如果是Apache )。使用Wordpress安装它的内容如下：

# BEGIN WordPress
<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>

# END WordPress

我添加了行Header set Access-Control-Allow-Origin "*"，CORS错误消失了。