0

We are running magento 2 on below setup

Apache > Varnish > NGinx SSL termination

On initial setup we were getting the below error for all assets in pub/static

Failed to load xxx: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.

I have added the below to /pub/static/.htaccess this resolved our issues for .css files and all other assets except .html files and .json files

<IfModule mod_headers.c>
<FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|html|json|swf|eot|ttf|otf|woff|woff2)$>
   Header set Cache-Control "max-age=604800, public"
   Header set Access-Control-Allow-Origin "*"
   Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS' always"
   Header set Access-Control-Max-Age "604800"
   Header set Access-Control-Allow-Headers "Host, Content-Type, Origin, Accept"
</FilesMatch>
   <FilesMatch .*\.(zip|gz|gzip|bz2|csv|xml)$>
       Header append Cache-Control no-store
   </FilesMatch>
</IfModule>

Our header from our CSS files and HTML matches so I am not sure why only HTML files are showing this error. Headers below

HTML HEAD

HTTP/1.1 200 OK => 
Content-Type => text/html
Content-Length => 2018
Connection => close
Server => nginx
Date => Sat, 31 Aug 2019 14:46:42 GMT
Last-Modified => Sat, 31 Aug 2019 07:37:44 GMT
Cache-Control => max-age=604800, public
Expires => Sun, 30 Aug 2020 14:46:42 GMT
Access-Control-Allow-Origin => *
X-UA-Compatible => IE=edge
X-Frame-Options => SAMEORIGIN
Access-Control-Allow-Methods => GET, POST, PUT, DELETE, OPTIONS' always
Access-Control-Max-Age => 604800
Access-Control-Allow-Headers => Host, Content-Type, Origin, Accept
X-Content-Type-Options => nosniff
X-Nginx-Cache-Status => EXPIRED
X-Server-Powered-By => Engintron
Vary => Accept-Encoding
X-Cache => Hit from cloudfront
Via => 1.1 XXX.cloudfront.net (CloudFront)
X-Amz-Cf-Pop => ORD50-C1
X-Amz-Cf-Id => XXXOFKszmpSr0kvAFMTr1vEz3lgQZP4RBI53WhL-Q==
Age => 20

CSS HEAD


HTTP/1.1 200 OK => 
Content-Type => text/css
Content-Length => 694946
Connection => close
Server => nginx
Date => Sat, 31 Aug 2019 15:08:32 GMT
Last-Modified => Sat, 31 Aug 2019 14:28:03 GMT
Access-Control-Allow-Origin => *
X-Frame-Options => SAMEORIGIN
Access-Control-Allow-Methods => GET, POST, PUT, DELETE, OPTIONS' always
Access-Control-Max-Age => 604800
Access-Control-Allow-Headers => Host, Content-Type, Origin, Accept
Expires => Mon, 30 Sep 2019 15:08:32 GMT
Cache-Control => max-age=2592000
Pragma => public
Accept-Ranges => bytes
Vary => Accept-Encoding
X-Cache => Miss from cloudfront
Via => 1.1 xxxx.cloudfront.net (CloudFront)
X-Amz-Cf-Pop => ORD51-C1
X-Amz-Cf-Id => xxxx_Kfn0XAc6fyM81iNUQ==

The Access-Control-Allow-Origin => * is visible in both headers. Does anyone know why we may still be getting an error on HTML?

Thanks

1

you have typo in headers:

Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS' always"
Header set Access-Control-Allow-Headers "Host, Content-Type, Origin, Accept"

probably must be like:

Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Host, Content-Type, Origin, Accept, X-Requested-With"
  • Worked perfectly, thanks! – Nadroj467 Aug 31 at 17:39
  • but if you have apache, you do not need nginx. – MagenX Aug 31 at 18:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.