You’re probably here because you’re seeing the following your browser’s console.log:
has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
And perhaps you’ve found posts like “How-To: Enable CORS in BrowserSync” and it didn’t work.
The problem isn’t BrowserSync but Apache. You’ll need to configure your local server. Following the guide, “Getting CORS to work with Apache” here’s what you need to do. Users using MAMP will have to translate these instructions, to use the MAMP files associated instead of the /etc files in the system.
Step 1) Make sure you have httpd.conf mod_headers.so enabled.
Go to /etc/apache2/ and use your favorite text editor to open httpd.conf, you’ll need to use admin access to edit the file. For non-terminal users, Its easiest done through the terminal.
sudo nano httpd.conf
#LoadModule headers_module modules/mod_headers.so
(for me it was roughly about line 120) and uncomment it if it hasn’t been already. (Delete the #).
Save and exit (control x)
from the /etc/apache2/ go to the extra director
Step 3) Modify your Vhosts
use your favorite text editor to open httpd.conf, you’ll need to use admin access to edit the file. For non-terminal users, Its easiest done through the terminal.
sudo nano httpd-vhosts.conf
Locate your vhosts entry of the local domain.
It should look something like following:
Require all granted
Add the following within the directory tags if they exist.
Header set Access-Control-Allow-Origin "*"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Save and exit.
Step 4) Restart Apache
In the terminal use the following command:
sudo apachectl -k restart
You may need to restart grunt or gulp.