CODEWITHSUNDEEP
wordpress
Ujjawal Poonia
Ujjawal Poonia

Reputation: 331

Access to font at from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

I have two problems in my website:

1) Mixed Content: The page at 'https://www.mywebsite.com/' was loaded over HTTPS, but requested an insecure font 'http://demo.kallyas.net/ares-furniture-interior-design/wp-content/uploads/sites/6/2016/03/montserrat-light-webfont.woff'. This content should also be served over HTTPS.

2) Access to font at 'https://kallyas.net/demo-ares/furniture/wp-content/uploads/sites/6/2016/03/montserrat-light-webfont.woff' from origin 'https://www.mywebsite.com' has been blocked by CORS policy:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have tried:

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

& 

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

Upvotes: 6

Views: 21949

Answers (2)

Bud Damyanov
Bud Damyanov

Reputation: 31919

You can add particular header to the server's response instructing the browser to allow fetching particular resource (font, image, etc.) by editing the .htaccess file in server root folder (or where your web site is):

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

The regex line (ttf|ttc|otf|eot|woff|woff2|font.css) means that we will add this header to the response when serving files with such extensions and every CSS file, who begins with "font" and ends with "css" (the dot represent any character, because it is not escaped).

By my experience this is the most effective and simple way to solve the problem.

Upvotes: 5

Nikunj Kathrotiya
Nikunj Kathrotiya

Reputation: 963

put this code in your .htaccess file and try it

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

Upvotes: 14

Related Questions