How to fix Access-Control-Allow-Origin issue

Are you seeing this type of error message?

Access to resource at 'https://www.example.com/path/to/resource' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This error indicates a mismatch between the domain serving the resources and the domain from which the content is being accessed. In this guide, we’ll explain how to resolve this issue within your WordPress site hosted on Staq.

Understanding the Issue

In this example, the URL `https://www.example.com` is where the resources (such as fonts, images, or scripts) are being served from, while the primary domain is set to `https://example.com`. This mismatch is causing the browser to block the resources due to the No ‘Access-Control-Allow-Origin’ error.

Steps to Resolve the CORS Issue

1. Check if the PRIMARY Domain is Correct

First, log into the site’s Staq Panel and go to Domains. Verify that the PRIMARY domain is set to `https://example.com`.
If the primary domain is correct, but the resources are being served from https://www.example.com, the mismatch will cause the CORS issue.

2. Update Theme Files

If your primary domain is correct, check your theme files for any hard-coded URLs that reference `https://www.example.com`. You may need to change these to match the primary domain, `https://example.com`.

3. Clear Theme or Performance Cache

If updating the theme files doesn’t resolve the issue, it might be due to cached settings in your theme or performance caching plugins. Clear your website’s cache (via your theme settings or any caching plugins) to ensure that the correct URLs are being served.

4. Perform a Database Search and Replace

If the issue persists, you may need to perform a search and replace in your WordPress database to ensure all instances of `https://www.example.com` are replaced with the correct primary domain, `https://example.com`.
Refer to our guide on how to perform a database search and replace: How to Do a Search/Replace

Conclusion

The Access-Control-Allow-Origin issue can arise due to mismatched domains when serving resources. By ensuring the correct primary domain is set and making sure your theme files, cached settings, or database values are updated accordingly, you can resolve this error. If you need further assistance, feel free to contact our support team.