Understanding CORS errors

What is CORS?

Cross-Origin Resource Sharing (CORS) is a browser security feature. It defines how one website can request data or files (such as fonts, images, scripts, or API responses) from another domain. When you see a CORS error in your browser console, it’s important to know this error does not originate from your Pressable-hosted site, but from the remote site or resource your site is trying to access. For example:

• Your site requests a font from a third-party CDN.
• Your site uses JavaScript to fetch data from an external API.

If the remote domain does not permit requests from your site’s domain, the browser blocks the request and shows a CORS error. You can read more about how this works at MDN’s CORS documentation.

What site owners can do

• Check if the error involves an external resource. If it does:
  • Contact the remote site or API provider and ask them to add your domain to their CORS policy.
  • Review their documentation for whitelisting domains.
• If the issue is with your own second site (not hosted at Pressable):
  • You will need to add or adjust the Access-Control-Allow-Origin header on that server.
  • Reference MDN’s Access-Control-Allow-Origin documentation.
  • Add a CORS header that specifically allows your requesting domain to access the resource.
• If your Pressable live site is pulling resources from its Pressable staging site (or vice versa):
  • This happens when URLs still reference the old environment.
  • Run a search-replace to update URLs in the database by following our guide: Using Search-Replace on Your Pressable Site.
  • If you use a page builder you may also need to regenerate static assets (such as JavaScript and CSS) which can contain hard-coded URLs. See our guide: How to Flush the Cache in Popular Page Builders.

What causes CORS errors?

Browsers show a CORS error when the remote server does not include the required headers in its response. Common scenarios include:

• Fetching data via JavaScript from an API that does not allow your domain.
• Loading fonts, scripts, or images from a third-party provider without proper CORS headers.
• URLs not updating correctly after a migration or push from staging to production.

Even though the error appears in the console for your site, it’s the remote server’s headers that are the problem.

Why CORS errors are not a Pressable server issue

• Pressable’s servers correctly deliver the content of the sites we host.
• CORS errors occur when the remote site either rejects your request or fails to set proper headers.
• Pressable support can review the error and confirm which domain is producing the error, but can’t adjust the remote site to resolve it.

How to confirm the error source

1. Open your browser’s developer console by right-clicking anywhere on the page and choosing “Inspect” from the pop-up menu. Navigate to the Console tab.
2. Look at the full error message. Example:
   • Access to fetch at 'https://api.example.com/data' from origin 'https://yoursite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
3. The key detail is the remote domain mentioned (in this example, that is api.example.com/data). This is the domain of the resource that is blocking your site’s request.

How to add CORS headers to your own site

See our guide to adding custom headers here.

Key takeaways

• CORS errors are a browser security feature.
• They occur because the remote site has not permitted access from your domain.
• Resolution depends on adjusting headers on the remote server or correcting URLs if a staging/live mismatch is involved.