Table of Contents
After enabling CDN in the Magento application, you will get CORS header issues, and to address these issues, you need to define CORS header rules in the .htaccess file.
How to Resolve CORS Header Errors
Here we have multiple CORS errors for which we are providing the fixes, so feel free to navigate to the error you are facing.
Important
If you add any rules in the .htaccess file from the below-mentioned rules, be sure to clear all the cache from the application, and if you are using Redis, then flush the cache from Redis as well and check the site again.
Error #1 — Fixing 'No Access-Control-Allow-Origin Header' Error
Here's the first error, which you get most of the time, as shown in the screenshot below:
Access to XMLHttpRequest at 'https://387461-1218216-raikfcquaxqncofqfm.stackpathdns.com/pub/static/version1585421031/frontend/Magento/luma/en_US/Magento_Ui/templates/modal/modal-slide.html'
from origin 'https://magento-387461-1218216.cloudwaysapps.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If you are getting the above error “No 'Access-Control-Allow-Origin' header is present” then you need to identify where is the actual origin and then place the following CORS header rule on top of the .htaccess file:
Header set Access-Control-Allow-Origin "*"
Error #2 — Fixing 'Preflight CORS Header Issue'
If you are getting different CORS header issues, as shown in the screenshot below then you need to place a different rule in the .htaccess file.
Access to XMLHttpRequest at 'https://387461-1218216-raikfcquaxqncofqfm.stackpathdns.com/pub/static/version1585421031/frontend/Magento/luma/en_US/Magento_Ui/templates/modal/modal-popup.html' from origin 'https://magento-387461-1218216.cloudwaysapps.com' has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.
As you can see in the above CORS header issue, you are getting “preflight cors header issue” so in that case, you need to define the following rules on top of the .htaccess file.
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
Error #3 — Fixing 'Multiple Values CORS Header Issue'
If you get another CORS header issue that is related to multiple values, as shown in the screenshot below, then check the .htaccess file or application code where you have already defined the CORS header “Access-Control-Allow-Origin” and if its there, then remove it from the application and after clearing the cache check the site again.
Access to XMLHttpRequest at 'https://387461-1218216-raikfcquaxqncofqfm.stackpathdns.com/pub/static/version1585421031/frontend/Magento/luma/en_US/Magento_Ui/templates/modal/modal-custom.html' from origin 'https://magento-387461-1218216.cloudwaysapps.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed
The screenshot below is from the .htaccess file where the CORS header “Access-Control-Allow-Origin” is already defined due to these multiple values, and the CORS header issue is appearing, so remove the CORS header rules from the .htaccess file and check the site again.
That’s it! We hope this article was helpful. If you need any help, then feel free to search your query on Cloudways Support Center or contact us via chat (Need a Hand > Send us a Message). Alternatively, you can also create a support ticket.