6

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!

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

3 Answers 3

4

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.

4
  • Where I can put this. I have added this in nginx.conf.sample. But I am getting 404 for api calls. Nov 22, 2017 at 6:37
  • You need to add in you nginx configuration used in the site enabled. Nov 23, 2017 at 8:07
  • Where I can put this in lampp server for magento-2.2.7 @FranckGarnier . Feb 7, 2019 at 7:28
  • Locate you Nginx config file ou Apache2 config file and update the config Feb 25, 2019 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 and acknowledge that you have read and understand our privacy policy and code of conduct.

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