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.
If you are experiencing a CORS error, your Console will show different errors depending on which error your experiencing. For double CORS issues the message should 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 will include a message that should look like 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 wildcard(*) 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:
This will add your specified domain to the Access-Control-Allow-Origin response header from content served from the StackPath CDN.
Restrictive CORS will include a similar message 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 'http://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 the wildcard(*) or to the specific URL that is attempting to gain access to the content, in the above example, this would be http://foo.bar.