CORS (Cross-Origin Resource Sharing)

If your fonts don't look correct when screen sharing or if there are missing icons, you might have a CORS issue.

This might happen if you are self hosting webfonts among other reasons.

To confirm if this is happening, simply open your browser console (as the agent) during a screen share session. You will see something similar to this:

Access to font at 'https://yoursite/some-webfont.ttf' from origin
'https://app.feederloop.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Solution 1

Allow CORS on your proxy, eg:

• Add a header of: Access-Control-Allow-Origin "*"
• Or add a header of Access-Control-Allow-Origin "app.feederloop.com"

The specifics of how you do this will vary greatly depending on your environment. Ultimately what you need to do here is allow cross origin resource sharing between app.feederloop.com and your website.

Depending on your environment, you might be able to specify that only webfonts are allowed (if that is indeed the error you're receiving).

Solution 2

Instead of self hosing webfonts, use a CDN. This will ensure that issues like CORS are handled for you.