CORS with php (Wordpress)

Question

I have relaunched my website with Wordpress. Unfortunately, a couple of fonts are not being displayed neither in Chrome nor Firefox nor IE. I get the following error:

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.

This is probably because I've installed Wordpress in a subdirectory, but then "moved" it so the root by copying the index.php to the root (I want the new website to be displayed when requesting the home URL).

In order to fix the missing fonts, I've tried adding either of the following code to header.php and wp-blog-header.php:

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

---

or

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

---

or

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(); 
  }
}

---

I've also replaced the "*" by the home-URL. Nothing worked. I'm very new to this whole matter and don't know much about php and stuff. But maybe one of you have any idea what else I could try to fix this?? I'd be super grateful!!!!

Thanks, Elena

Answer 1

The problem here seems to be that you previously had the fonts on the same domain as the WordPress installation. Now that fonts live on a different domain (and possibly different server), you need to set the Access-Control-Allow-Origin header on the server that is handling the fonts, not the one serving WordPress.

On Nginx it would be something like:

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

On Apache's .htaccess it will be exactly as you did above, but you should restrict this header to font files:

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

I faced same issue Today and I am able to solve following link https://thoughtsandstuff.com/wordpress-rest-api-cors-issues/

Add this to your WordPress function.php file and you should be set!

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

I had the same problem but with icons may solution at the moment is like that:

Depending on your host service you should have a .htaccess file (if it's an Apache server) in your root directory. With a Wordpress installation it's content is like that:

# 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

I added the line Header set Access-Control-Allow-Origin "*" and the CORS error was gone.