Why am I seeing CORS errors when testing my Mixpanel implementation?

Due to security updates to many web browsers, such as Chrome or Firefox, it is not uncommon for locally hosted testing environments to disallow cross origin resource sharing (“CORS”) unless they are sent via SSL. This prevents your locally hosted sites from accessing all the other files on your computer, and can protect you from malware that might be hidden in your code, and unfortunately means that any Mixpanel requests made from certain browsers may be blocked and trigger a CORS error with the message:

No 'Access-Control-Allow-Origin' header is present on the requested resource. The response had HTTP status code 400. mixpanel-2.2.min.js:29 Mixpanel error: Bad HTTP status: 0

If you see these errors showing while you are testing a locally hosted version of your website, don’t panic. These errors will disappear completely when you ship your code to your production servers, and your tracking should work perfectly. Additionally, if you want to test your Mixpanel implementation on a locally hosted site, forcing Mixpanel calls into SSL protocol is as simple as making a small addendum to the mixpanel.init() function at the end of your Mixpanel code snippet:

mixpanel.init("your token", {api_host: "https://api.mixpanel.com"})

This will force all XHR requests sent by your Mixpanel implementation to send via HTTPS rather than HTTP, and should prevent CORS errors moving forward when testing on websites locally.