This post could have been titled “Fix Web Fonts Not Loading Issue With BrowserSync” — that is the issue that I was facing. I develop locally on WAMP and rely BroswerSync’s stylesheet injection to browser test on different devices. I have a proxy configured in BroswerSync for each vhost that I have created in WAMP. With the proxy setup for johndugan.local and browsersync active, all assets from johndugan.local get loaded from johndugan.local:3000. This was causing the following error in Chrome:
Font from origin http://192.168.1.2:3000
has been blocked from loading by Cross-Origin Resource Sharing policy: No Access-Control-Allow-Origin
header is present on the requested resource. Origin http://johndugan.local:3000
is therefore not allowed access.
Uchgk, ensue frustration.
Luckily, there is a relatively simple solution to the CORS issue. You need to configure cross-site requests on your vhost in Apache. Below are instructions.
-
Enable the headers module in Apache.
-
If you are running WAMP, enable the headers module by selecting the proper option in the Apache Modules section of the WAMP menu.
-
If you are not running WAMP, enable the headers module in your Apache
httpd.conf
file by adding the following line:LoadModule headers_module modules/mod_headers.so
.
-
-
Add the
Access-Control-Allow-Origin
header directive to all HTTP responses for your virtual host(s). -
Restart Apache. Problem Solved.
Comments