Bei vielen Web-Sites werden statische Daten über ein CDN oder einfach über mehrere Server ausliefert, in Magento z.B. die skin- oder media-Daten. Dabei kann man Probleme bekommen, wenn Browser z.B. Fonts aus Sicherheitsgründen nicht von einer anderen Domain nachladen wollen. Für den Benutzer ist das an den fehlenden Daten sichtbar, für den Entwickler an einer Fehlermeldung in der Browser-Console. Dort wird ein fehlender Access-Control-Allow-Origin Header angemahnt. Die Lösung für dieses Problem ist recht einfach.

Zu einer solchen Situation kann es z.B. kommen, wenn in Magento die skin- und/oder media-Daten aus Performance-Gründen von einem anderen Server geladen werden. Ein Font, der z.B. auf dem skin-Server liegt, wird wegen der abweichenden Domain dann nicht geladen. Aber dieses Problem ist nicht auf Fonts oder Magento beschränkt, es kann immer auftreten, wenn für eine Anwendung über mehrere Domains verteilt ausgeliefert wird.

Die Lösung für dieses Problem ist recht simpel und wird in der Fehlermeldung im Browser auch schon angedeutet. In der .htaccess des Servers auf dem die ausgelagerten Daten liegen (im Beispiel der skin-Server), muss angegeben werden, dass als Origin der Daten die eigentliche Domain gelten soll bzw. dass die Daten nur von dort angefordert werden können:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin http://www.mysite.com
  </IfModule>
</FilesMatch>

Hier ist angegeben, dass alle Font-Dateien als Origin http://www.mysite.com erhalten sollen, dh. von dort bzw. für diese Domain nachgeladen werden dürfen Soll die Angaben für andere Dateien und Datei-Typen gelten, ist der reguläre Ausdruck in der ersten Zeile entsprechend anzupassen. Dass die URL, die die „eigentliche“ Domain angibt, angepasst werden muss, dürfte klar sein.

Bei mir ist dieses Problem bei einem jQuery-Plugin aufgetaucht, das Icons als eigene Fonts laden wollte, der Browser dies aber nicht zulassen wollte. Mit den obigen Zeilen war das Problem schnell gelöst.