Nexcess Logo

How to resolve CORS errors in Magento 2 multi-stores using a CDN

Knowledge Base Home

Notice anything different?

We've enhanced the appearance of our portal and we're working on updating screenshots. Things might look different, but the functionality remains the same.
September 22, 2020

Cross-origin request blocked (CORS) errors have many possible causes. This article applies to the “Cross-Origin Request Blocked error” that is sometimes the result of a Magento multi-store making use of a CDN.

Many businesspeople wonder How Does a CDN Work to Speed Up Your Ecommerce Site? but they will discover that the reasons are remarkably straightforward. Review the content, resources, and links in this article to learn more about those reasons in full detail.  

Problem

I have set up my Magento (2) multi-store to pull static assets from my Nexcess CDN, but browsers attempting to visit my store present a “Cross-Origin Request Blocked” error in the developer console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <your_website>

Cause

When functioning correctly, cross-origin resource sharing (CORS) allows one site access to another site’s resources despite having different domain names.

When using different hosts (such as a CDN host) to serve portions of your site, you must inform the browser that the third party host is safe to use. Otherwise, the browser assumes the third party host is malicious and blocks it.

Solution

ATTENTION: This solution requires editing your .htaccess file. If you are unfamiliar with .htaccess and are a Nexcess client, please contact our support team from your Client Portal or by email.

To resolve this issue, access your server using SSH and edit the .htaccess file in your website’s root directory as shown below. If you are a Nexcess Classic (non-Cloud) client, you must first enable SSH access. Nexcess Cloud clients have SSH access by default.

In your .htaccess file, insert the line shown below, but replace the angled brackets (<>) and everything between them with the indicated information.

<IfModule mod_headers.c>
   <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|ico|js|json|html|pdf)$">
     Header set Access-Control-Allow-Origin "<customer_origin_domain>"
     Header set Access-Control-Allow-Headers "X-Requested-With"
   </FilesMatch>
</IfModule>


For 24-hour assistance any day of the year, contact our support team by email or through your Client Portal.

Luke Cavanagh
Luke Cavanagh


Luke Cavanagh, Strategic Support & Accelerant at Liquid Web, brings a decade of experience working with WordPress and WooCommerce to our Product Team. His GitHub page offers a glimpse into his multiple areas of subject matter expertise. Luke elicits "ideation" for new website management and ecommerce software needs. Then, he collaborates with the Liquid Web team in the development of next generation product features and wins.


With proficiency, Luke infuses the product roadmap with a curated vision of the next enhancements while quickly evolving the functional requirements to align with innovations in the industry. He brings structure to ambiguous situations. His professional acumen and precise communication style have won him respect among stakeholders and engineers alike. "Ninja stuff with WordPress and WooCommerce," is an apropos way to describe Luke's savviness with these platforms — and his way of influencing our organization for improving to them.


Coming out of the University of Brighton with a Business and Technology Education Council (BTEC) Higher National Diploma (HND) in 2D & 3D Design, Luke's credentials prepared him well for his current role that blends both web development and design. His HND credential leveraged his foundational learning at West Kent College, where is received a National Diploma (ND) in Graphic Design.


Prolific are Luke's contributions to our knowledge libraries that are available within the Liquid Web Family of Brands:

- Nexcess blog for the WordPress category

- Nexcess blog for the WooCommerce category

- Nexcess knowledge library for the WordPress category

- Nexcess knowledge library for the WooCommerce category

- Liquid Web blog for the WordPress category

- Liquid Web blog for the WooCommerce category

- Liquid Web knowledge library for the WordPress category

- Liquid Web knowledge library for the WooCommerce category


In his personal life, Luke is a devoted husband and teen wrangler. He considers himself a Synthwave enthusiast, Jerry Goldsmith fan, and Doctor Who aficionado. He is happy to introduce his friends and teammates to essential vocabulary for life found only in British English, such as "gubbins" and similar terms.


We use cookies to understand how you interact with our site, to personalize and streamline your experience, and to tailor advertising. By continuing to use our site, you accept our use of cookies and accept our Privacy Policy.