22.04.2021 | Allgemein, Apache
Blocked by CORS policy: No ‚Access-Control-Allow-Origin‘ header is present on the requested resource

Diesen, oder eine ganz ähnliche Fehlermeldung hat der ein oder andere sicherlich schonmal im Zusammenhang mit Web-Schriftarten, die Domänenübergreifend eingebunden sind, gesehen. Stelle ich etwa Webfonts wie Font Awesome über eine CDN Domain zur Verfügung, werden hier mitunter die inkludierten Schriftarten blockiert. Das ist gut und schlecht zugleich. Gut, weil nicht jeder die zur Verfügung gestellten Inhalte via CSS einbinden kann, schlecht, weil ich es auch erstmal nicht kann. :-)

Abhilfe schafft die Anpassung des ausliefernden Virtual Host oder der dort befindlichen .htaccess Datei im Web-Root. Das Vorgehen ist dabei nahezu identisch und ich kann grundsätzlich wählen, ob ich Inhalte wie CSS oder Schriftarten global via Wildcard freigebe, oder die Resourcen nur durch Authentifizierung zugänglich mache.

In diesem Fall reicht mir eine weite Öffnung via Wildcard, untergebracht in einer .htaccess – Datei im betroffenen Web-Root aus.

Zunächst sollte überprüft werden, ob das Apache Modul „headers“ installiert ist:

root@herakles:/ # apachectl -M | grep headers

Ist das Ergebnis leer, kann das Modul aktiviert werden:

root@herakles:/ # a2enmod headers

Enabling module headers.
To activate the new configuration, you need to run: systemctl restart apache2

Dann den Apache wie beschrieben neu starten und das Modul wird geladen.

Als nächstes muss die im Web-Root befindliche .htaccess Datei angepasst (oder erstellt) werden. In diesem Fall will ich explizit die Webfonts erlauben.

Der Inhalt der .htaccess sieht demnach wie nachfolgend aus:

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

Ein Restart des Apache ist abschließend nicht mehr notwendig und ab sofort sollten auch die eingebundenen Webfonts im Zugriff sein.

geschrieben von Jens

, , , ,

keine Kommentare