CORS Headers: Missing Fonts and Stylesheets Help

See examples of CORS Headers that are missing fonts or stylesheets and how to easily correct these issues with our helpful guide.

For security reasons, web browsers will prevent JavaScript code from making requests to a different domain (also known as the origin) than the one it's hosted on. Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

Misconfigured CORS

Misconfigured CORS Headers can lead to missing fonts or broken JavaScript assets. These usually manifest themselves by missing asset icons in place of stylesheets, fonts, or actual icons.

This can be caused by one of three issues: 

1. Missing CORS headers - where the browser is denying permission to view these contents because there is no Cross-Origin Resource Sharing header.
2. Double CORS headers - where the browser is only expecting one value for the CORS header but is receiving two. 
3. Restrictive CORS Policy - where the browser expects only one domain to have access to the content and a different domain is trying to access it. 

Troubleshooting CORS Headers

Troubleshooting CORS headers is easy and requires no special tools. It can even be done within your web browser, just follow these steps:

1. Right-click or Command-Click (for Mac) anywhere on your web page. 
2. Select the Inspect or Inspect Element option to pull up your browser's developer tools. 
   
3. Select the Console option.
   

Double CORS

Double CORS errors occur when your origin server and StackPath are both setting an access-control-allow-origin header for your content. Browsers only expect one value for access-control-allow-origin and will deny access in the presence of both headers. When double CORS issues are present a message in the browser debug console will look something like this: 

Access to Font at 'http://c7s7y6z8.stackpathcdn.com/wp-content/themes/landing/font1.ttf' from origin 'http://example.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin 'http://example.com' is therefore not allowed access. 

You can also see this issue by looking at the Response Headers, since the Access-Control-Allow-Origin header will appear twice.

In order to avoid the double CORS error, effective January 2020 StackPath only adds the access-control-allow-origin header for your content if it is not included in your origin server's response. If the access-control-allow-origin header is configured in your server, you have to manage the allowed hosts from your origin server. If you want to manage the CORS header from the StackPath CDN settings, we recommend you remove the header from your origin’s configuration file. If you configured your site with StackPath prior to January 2020 please disable the CORS setting then re-enable, to make sure it follows the new behavior.

Missing CORS

Missing CORS errors occur when there is no access-control-allow-origin header present in responses from separate domains than your root page source. When this header is missing, the browser debug console will display a message similar to this: 

Access to Font at 'https://c7s7y6z8.stackpathcdn.com/wp-content/themes/landing/font1.ttf' from origin 'http://example.com'  has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access.

This can be corrected by Enabling the CORS Header Support setting in the StackPath Control Panel. The default "All Origins" value for Access-Control-Allow-Origin allows for any domain to have access to this content. 

Once added, you will see an Access-control-Allow-Origin header appear in the response headers of content delivered from the CDN.

For Extra Security, you can specify a domain instead of using the wildcard (*) to only allow the specified domains. Using the wildcard will allow every domain to have access to the content while specifying a domain will allow only the specified domain to have access. In this example, only https://google.com is allowed. To edit your Access-Control-Allow-Origin header, change the "Allowed Origins" dropdown box to "Specified Origins", enter the specified origin and then click 'Save':

This will add your specified domain to the Access-Control-Allow-Origin response header from content served from the StackPath CDN. 

Restrictive CORS

Restrictive CORS errors occur when the value of the access-control-allow-origin header included with a response does not match the actual domain returning the content. When this happens, the browser debug console will display a message similar to this:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 'https://c7s7y6z8.stackpathcdn.com/wp-content/themes/landing/font1.ttf' from origin 'https://foo.bar'(Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘example.com') 

This can be alleviated by either switching the content of the Access-Control-Allow-Origin header to "All Origins" or to the specific URL that is attempting to gain access to the content, in the above example, this would be https://foo.bar.