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

      Screenshot of the header_module highlighted in 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.

      Screenshot of the headers_module directive in the Apache httpd.conf file
      httpd.conf Headers Module
  2. Add the Access-Control-Allow-Origin header directive to all HTTP responses for your virtual host(s).

    Screenshot of the Apache Virtual Hosts configuration file with the Access-Control-Allow-Origin highlighted
  3. Restart Apache. Problem Solved.

    Screenshot of the WAMP menu option to restart all services
    Restart All Services

Leave a Reply

Your email address will not be published. Required fields are marked *