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

score 7 · Answer 1 · answered Dec 08 '16 at 12:25

7

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>

answered Dec 08 '16 at 12:25

Cristiano Baptista

176
1
6

thanks for the reply! I can't edit the .htaccess because of my host, unfortunalety... and I'm not familiar with Nginx, how would I use it? And where put the code? Thx! – Elliomelly Dec 08 '16 at 17:49
Don't worry about NGINX, because you're using Apache. My suggestion would be for you to ask your hosting support if it is possible to modify Apache configuration and where. – Cristiano Baptista Dec 08 '16 at 18:15
so there's no other way to do this, you think? – Elliomelly Dec 08 '16 at 18:21
I don't think so, because these files are being served directly by the server. The request won't go through PHP, so there is no way you can add the needed header via PHP. – Cristiano Baptista Dec 08 '16 at 18:25

score 3 · Answer 2 · answered Dec 08 '16 at 17:24

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.

Thanks so much for the replies!! Unfortunalety, I'm not able to edit the .htaccess because my host doesn't allow it :(( so not an option.... so stupid. — Elliomelly, Dec 08 '16 at 17:47

score 2 · Answer 3 · answered Nov 12 '20 at 15:10

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

CORS with php (Wordpress)

3 Answers3

Linked