wordpress - Font-Awesome has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

Here's a new take on a common problem.

So I have a plesk hosting, with a SSL on wildcard domains. I have a wordpress theme which is using Font-Awesome icons, hosted on the same server. I have added the following lines to my /httpdocs/.htaccess file, at the very top:

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

I use the polylang translation plugin, which is set to use subdomain for different language:

• mysite.com (English)
• fr.mysite.com (French)

When I access example.com, everything works fine. When I access fr.example.com, I get a lot of the following errors in the console:

Access to font at 'https://example.com/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.woff2' from origin 'https://fr.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I was expecting the error to go away by adding the Header set lines to my .htaccess but it does not seem to help at all. According to Plesk I do have the Headers module activated.

I do use NGINX as a proxy to Apache, all with default configs. I did try to add the following lines, just in case, but all 3 attempts lead to Error 500:

#NGINX < 1.4
 if ($filename ~* ^.*?.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
 }

# NGINX 1.4
location ~* .(eot|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

# NGINX > 1.6
if ($request_uri ~* ^.*?.(eot)|(ttf)|(woff)$) {
    add_header Access-Control-Allow-Origin *;
}

I also tried to add this in the .htaccess without success:

Header set Access-Control-Allow-Origin "*"

It almost seem as the .htaccess is not being loaded, but then the rewrite rules and the caching headers from WP-Optimize works fine and are from the same file.

Any idea what I am doing wrong ?

question from:https://stackoverflow.com/questions/65865883/font-awesome-has-been-blocked-by-cors-policy-no-access-control-allow-origin-h

Answer 1

As I use Apache and NGINX. Apache role is to serve more complex requests while NGINX role is to quickly serve statics files. The header code was not being used as the specific files causing the error are considered to be static files and therefore served directly by NGINX and Apache never gets involved.

In Plesk, if you go in the domain example.com > Apache & nginx Settings, scroll down a bit and check the NGINX settings. (Note that you need to apply this for your main domain, NOT the subdomains)

In my case I had:

[X] Proxy mode 
[X] Smart static files processing 
[_] Serve static files directly by nginx 

Basically NGINX tried to be smart and serve the ttf, woff, woff2, etc. Doing so the .htaccess is never interpreted for those files.

Solution

In Plesk, if you go in the domain example.com > Apache & nginx Settings. Uncheck Smart static file processing and check Serve static files directly by NGINX:

[X] Proxy mode 
[_] Smart static files processing 
[X] Serve static files directly by nginx 

And under that last option you have a text box prefilled with file extensions that you want NGINX to serve directly. I made sure to remove ttf, woff, woff2 from the list. That way Apache is now in charge of serving those files slightly slower, but it will read and apply the .htaccess file to it.

In the /httpdocs/.htaccess file I have that bit of code at the very top:

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

Now it should work!