環境
メインのコーポレートサイトがヘテムルで、そこにフォントファイルをアップしています(wwwドメイン)。
カラーミーショップをコーポレートのサブドメインを利用して運用していますが、wwwドメインのほうにアップしてあるCSSにて
CSS
1@font-face { 2 font-family: "font-name"; 3 src: url("//www.XXXXX.jp/font/font-file.ttf"); 4・・・
といった形でフォントを読み込んでます。
エラー内容
何をどうやっても以下エラーでChrome,Firefox,Edgeにてフォントが読み込まれません。
Access to font at 'https://www.XXXXX.jp/font/brown/font-file.woff' from origin 'https://shop.XXXXX.jp' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://shop.XXXXX.jp' that is not equal to the supplied origin.
なぜかmacのSafariとiOSのChrome,Safariは読み込まれていてCORSエラーが出ず、問題ないようです。
(当方macなのでWin環境は未確認です)
header has a value 'http://shop.XXXXX.jp' 〜 とあるのですがカラーミーはhttpsで運用しているためおかしいなと思ったのですが、この辺に何かヒントがあるのでしょうか。。
対策したこと
.htaccessにて
htaccess
1 2<IfModule mod_headers.c> 3 <FilesMatch ".(ttf|otf|eot|woff)$"> 4 Header set Access-Control-Allow-Origin "*" 5 Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept" 6 </FilesMatch> 7</IfModule> 8 9<IfModule mod_headers.c> 10 <FilesMatch ".(ttf|otf|eot|woff)$"> 11 SetEnvIf Origin "^https?://shop.XXXXX.jp$" ORIGIN=$0 12 Header set Access-Control-Allow-Origin %{ORIGIN}e env=ORIGIN 13 </FilesMatch> 14</IfModule> 15 16<IfModule mod_headers.c> 17 <FilesMatch ".(ttf|otf|eot|woff)$"> 18 Header append Access-Control-Allow-Origin: * 19 </FilesMatch> 20</IfModule> 21 22<IfModule mod_headers.c> 23 <FilesMatch ".(ttf|otf|eot|woff)$"> 24 Header set Access-Control-Allow-Origin: * 25 </FilesMatch> 26</IfModule> 27 28<IfModule mod_headers.c> 29 <FilesMatch ".(ttf|otf|eot|woff)$"> 30 Header append Access-Control-Allow-Origin: "https://shop.XXXXX.jp" 31 </FilesMatch> 32</IfModule> 33 34<IfModule mod_headers.c> 35 <FilesMatch ".(ttf|otf|eot|woff)$"> 36 Header set Access-Control-Allow-Origin: "https://shop.XXXXX.jp" 37 </FilesMatch> 38</IfModule> 39 40<IfModule mod_headers.c> 41 <FilesMatch ".(ttf|otf|eot|woff)$"> 42 Header set Access-Control-Allow-Origin: "https://shop.XXXXX.jp" 43 </FilesMatch> 44</IfModule> 45
などネットの情報を頼りにあらゆるパターンをやってみました。(上記はいっぺんにではなく一つずつ試しました)
それでもダメで、WPでwww側のサイトは構築しているので、functions.phpに
php
1<?php 2header("Access-Control-Allow-Origin: *");
とも記述してみました。がダメでした。
以上になりますが、何かお気づきの方いればヒントをお願いいたします。
回答1件
あなたの回答
tips
プレビュー