Cross-Origin Resource Sharing (CORS) is a mechanism that tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own. In short it allows or restricts sharing of resources (images, fonts etc.) between web sites.


This sometimes impacts recordings and heatmaps in Mouseflow because when we show a recording we load resources such as images and fonts directly from your site. If the CORS policy on your site is set to only allow your own domain to load these resources then we can't load them in your recordings.


Solution

To resolve this issue you will have to add '*.mouseflow.com' to the Access-Control-Allow-Origin header in your CORS policy (this is usually located on your server) - so it looks like this:


Access-Control-Allow-Origin: https://www.your-site.com , *.mouseflow.com


If you are unsure how to change this setting in your CORS policy please contact your developer- or devOps team, or possibly your web site provider


Note: Are you having issues with images or fonts not loading in recordings and heatmaps but you know that your CORS policy is not the culprit - please see our guide to whitelisting Mouseflow in your Content Security Policy (CSP)