Apache and BrowserSync Cross-Site Requests (CORS) Configuration

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.

1. 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.

     

2. Add the Access-Control-Allow-Origin header directive to all HTTP responses for your virtual host(s).

   

3. Restart Apache. Problem Solved.