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.conffile by adding the following line:
LoadModule headers_module modules/mod_headers.so.
Access-Control-Allow-Originheader directive to all HTTP responses for your virtual host(s).
Restart Apache. Problem Solved.