Why do I see errors about “Cross-Origin Resource Sharing” on my pages?
When you design a web page, the page sometimes includes “resources” like scripts or fonts from other sites. This is called cross-origin resource sharing, or “CORS”.
In some cases, browsers can block cross-origin resource sharing, resulting in items on pages that fail to load, and the browser’s developer console showing errors like this one from Google Chrome:
“Font from origin 'http://www.example.com' 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://example.com' is therefore not allowed access.”
Or this one from Mozilla Firefox:
“Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.example.com/resource. This can be fixed by moving the resource to the same domain or enabling CORS.”
This can even happen if the two domain names involved are similar subdomains of each other, such as example.com and www.example.com.
If your site uses cross-origin resources from servers you don’t control, such as fonts from Google Fonts, the operator of the other server should be allowing your site to load them. If you get one of these errors with a server like that, you can’t fix it yourself: contact the people running the other server about it.
However, if you control both “origins” yourself, such as example.com and www.example.com, you will need to fix this yourself. While there are many ways to do it, one way is to add one of these lines to your site’s .htaccess file:
Header add Access-Control-Allow-Origin * Header add Access-Control-Allow-Origin http://example.com Header add Access-Control-Allow-Origin http://www.example.com
The first is appropriate if you don’t care who accesses your resources. The second would allow only example.com to access resources on www.example.com, and the third would allow only www.example.com to access resources on example.com.