Magento 2 No ‘Access-Control-Allow-Origin’ header is present on the requested resource

Question

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!

Answer 1

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.

Answer 2

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

Answer 3

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