3

We are developing a front-end web app, running on a Node.js server, which accesses REST API of our Magento 2 instance, located on a separate server. The problem is that browsers impose Same Origin policy and when a request is made from the front-end served by Node.js to the server on which Magento 2 resides, we get "No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” error. We tried putting Header set Access-Control-Allow-Origin “*” in .htaccess file, as well as allowing all methods (put,post,get,options,delete,patch) and headers but we keep getting this error. We even tried setting the headers in index.php but no effect.

Any help is appreciated!

  • Did u manage to solve this, im facing same issue! @Magento Backend – Sushivam Apr 16 '17 at 4:28
  • please review answer below @SachinS – Fodakty Apr 18 '17 at 6:31
  • DId you solve this issue,I am facing same issue? @Fodakty – Lovely Setia Feb 5 at 6:38
2

I faced the same problem with a Magento setup with Nginx.

I share you my working configuration which solve this CORS problem for an headless Magento use case (API).

By defaut Magento do not accept OPTIONS call with API. So a workaround is to return a 200 response for all OPTIONS call on API :

location /rest {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,Authorization,X-CustomHeader,Keep-Alive,User-Agent,Origin,Referer,X-HTTP-Method-Override,X-Accept-Charset,X-Accept,Accept,Access-Control-Request-Method,Access-Control-Request-Headers,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 200;
    }
}

Some Allow-Headers is not mandatory, try to test which are on your case.

Then add headers on all other requests :

location ~ (index|get|static|report|404|503)\.php$ {
    .....
    .....

    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,Authorization,X-CustomHeader,Keep-Alive,User-Agent,Origin,Referer,X-HTTP-Method-Override,X-Accept-Charset,X-Accept,Accept,Access-Control-Request-Method,Access-Control-Request-Headers,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
}

Make sure to keep the always option in order to add these headers for response code other than : 200, 201, 204, 206, 301, 302, 303, 304, 307, or 308

Make sure you do not have basic auth authentication behind. If not, update the configuration in order to allow the OPTIONS CORS request made from your browser.

  • Where I can put this. I have added this in nginx.conf.sample. But I am getting 404 for api calls. – manish_khot Nov 22 '17 at 6:37
  • You need to add in you nginx configuration used in the site enabled. – Franck Garnier Nov 23 '17 at 8:07
  • Where I can put this in lampp server for magento-2.2.7 @FranckGarnier . – Lovely Setia Feb 7 at 7:28
  • Locate you Nginx config file ou Apache2 config file and update the config – Franck Garnier Feb 25 at 6:21
0

We were facing this issue because the developers were accessing the backend via their laptop which were on a different DNS domain than the backend server, once we put our web server and the backend on the same DNS domain (www.x.com, backend.x.com) the issue was resolved. So make sure all your resources share the same domain (DNS domain not network domain)

Hope that helps

0

I encounted this issue when using a CDN network, I added the following to allow cross origin sharing within the html/.htaccess file

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

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET"
Header always set Access-Control-Allow-Headers "X-Accept-Charset,X-Accept,Content-Type"

</FilesMatch>

Perhaps that will help

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.