On upgrading your Magento website to version 2.2, you may encounter various console errors due to cross origin (see examples below) which may be due to the use of a CDN on a different domain. This can be resolved by updating your vhost configuration.

Example Error Messages

These are some of the errors appearing in the console as a symptom of this issue:

- ... OPTIONS ... 405 ()
- Uncaught SyntaxError: Unexpected end of JSON input
- Response for preflight has invalid HTTP status code 405
- Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.
- Failed to load ... Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ... is therefore not allowed access. The response had HTTP status code 405.
- Access to Font at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'xxx' is therefore not allowed access.
- Failed to load xxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'xxx' is therefore not allowed access.
- Failed to load xxx: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'xxx' is therefore not allowed access.
- Failed to load xxx: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.

Web Server Configuration

The solution is relatively simple, you just need to add some special handling of cross origin requests and pre-flight OPTIONS requests to your web server configuration to allow the pre-flight requests through. This will allow all origins to access your resources:

# Note: for 'Access-Control-Allow-Origin' we use '*' instead of 'https://www.yourdomain.com'
# to be absolutely sure that these assets can be served to any origin, since we have a mixture of CDN,
# frontend url and admin url. We want to mitigate the risk of these PUBLIC assets not being served.

add_header 'Access-Control-Allow-Origin' '*' 'always';

if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*' 'always';
add_header 'Access-Control-Allow-Headers' 'x-requested-with' 'always';
add_header 'Access-Control-Max-Age' 86400 'always';
add_header 'Content-Length' 0 'always';
return 204;
}

This same code needs to be added to each of your location blocks within /static, so it is recommended to add this as a new file magento2-cors.conf and use include to prevent duplicating the same rules over and over, eg:

location /static/ {
location ~* .(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$ {
add_header X-Frame-Options "SAMEORIGIN";
include /etc/nginx/magento2-cors.conf;
}

location ~* .(zip|gz|gzip|bz2|csv|xml)$ {
add_header X-Frame-Options "SAMEORIGIN";
include /etc/nginx/magento2-cors.conf;
}

add_header X-Frame-Options "SAMEORIGIN";
include /etc/nginx/magento2-cors.conf;
}

CDN Configuration

Also ensure your CDN is configured to allow OPTIONS requests through and to be cached, as by default CDN may only allow GET and POST.

For more information on setting up AWS CloudFront CDN with your Magento website, please see the tutorial here.

Photo by Max Chen on Unsplash.
Article originally published on the Absolute Commerce website.

Published by Joseph McDermott

A certified Magento solution specialist with eleven years experience leading ecommerce development projects, converting complex problems into elegant technical solutions.

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.