This can be caused by one of three issues:
- Missing CORS headers - where the browser is denying permission to view these contents because there is no Cross-Origin Resource Sharing header.
- Double CORS headers - where the browser is only expecting one value for the CORS header but is receiving two.
- 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:
- Right-click or Command-Click (for Mac) anywhere on your web page.
- Select the Inspect or Inspect Element option to pull up your browser's developer tools.
- Select the Console option.
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.
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 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.