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

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

Overview

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.

Problem

I have set up my Magento (1 or 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. If necessary, identify the customer origin URL by accessing the CDN Control Panel as shown in How to configure a CDN customer origin server, but do not use the entire URL; use only the domain name as shown in the example below:

<IfModule mod_headers.c>

   <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|ico|js|json|html)$">

     Header set Access-Control-Allow-Origin "<customer_origin_domain>”

     Header set Access-Control-Allow-Headers "X-Requested-With"

   </FilesMatch>

</IfModule>


or 24-hour assistance any day of the year, contact our Support Team by email or through the Client Portal.

Article Rating (No Votes)
Rate this article
  • Icon PDFExport to PDF
  • Icon MS-WordExport to MS Word
 
Attachments Attachments
There are no attachments for this article.
Related Articles RSS Feed
How to enable CAPTCHA for user creation in Magento 1.x
Added on Tue, Jan 29, 2019
How to find and remove hanging Magento cron jobs with SSH
Added on Wed, Jan 30, 2019
How to enable CAPTCHA for user creation in Magento 2
Added on Mon, Feb 19, 2018
How to disable caching in Magento
Added on Wed, Jan 30, 2019
How to configure multiple Magento storefronts
Added on Wed, Jan 30, 2019
How to improve Magento maintenance mode
Added on Wed, Jan 30, 2019
How to install Magento CE v1.8 and later
Added on Thu, Mar 6, 2014
How to set the return path email in Magento 1.x
Added on Thu, Oct 30, 2014
How to issue a reindex in Magento
Added on Wed, Jan 30, 2019
How to set up CDN access for Magento 2
Added on Wed, May 16, 2018