Site Navigation

Post navigation

Apache and BrowserSync Cross-Site Requests (CORS) Configuration

Posted: November 18, 2014

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.

Apache Headers Module

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.

httpd.conf Headers Module

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