CORS policy: No ‘Access-Control-Allow-Origin’

Access-Control-Allow-Origin response header indicates whether the response can be shared with resources with the given origin.

Today i had the following error shown by my browser:

Access to Font at ‘https://www.konzeptcode.com/wp-content/themes/konzeptcode-theme/fonts/fontawesome/fontawesome-webfont.woff2?v=4.3.0’ from origin ‘https://reta.konzeptcode’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://reta.konzeptcode’ is therefore not allowed access.

After some reserach, adding this to my .htaccess file has solved the problem:


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

The new line in the .htaccess file

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
Header set Access-Control-Allow-Origin "*"
RewriteCond %{HTTP_HOST} ^konzeptcode.com$ [NC]
RewriteRule (.*) https://www.konzeptcode.com/$1 [R=301,L]
# add a trailing slash to /wp-admin
RewriteRule ^wp-admin$ wp-admin/ [R=301,L]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^(wp-(content|admin|includes).*) $1 [L]
RewriteRule ^(.*\.php)$ $1 [L]
RewriteRule . index.php [L]

After that my .htaccess looked like this

Do you want to understand what the problem is? Here some quotes

CORS is industry standard for accessing web resources on different domains. It is very important security concept implemented by web browsers to prevent Javascript or CSS code from making requests against a different origin.

crunchify.com

 

The Access-Control-Allow-Origin response header indicates whether the response can be shared with resources with the given origin.

MDN web docs