You cloned your Magento from Github, so all your core is in folder app/code/Magento/, you need remove it and run the composer command to have your core in the folder vendor/.
Note that you shouldn't clone the repository, next time install using Composer.
These are the steps that I used to fix:
rm -rf var/view_preprocessed/ var/cache/ var/page_cache/ var/di/ var/tmp/ var/generation/ pub/static/frontend/ app/code/Magento/ vendor/magento composer.lock
chmod 777 -R *
composer update -vvvv
php -f bin/magento setup:static-content:deploy
find . -type d -exec chmod 775 {}
find . -type f -exec chmod 660 {}
chmod u+x bin/magento
bin/magento maintenance:disable
bin/magento cache:clean
The Composer command will install de vendor modules.
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.
Best Answer
A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood.
It is an OPTIONS request, using three HTTP request headers: Access-Control-Request-Method, Access-Control-Request-Headers, and the Origin header.
A preflight request is automatically issued by a browser when needed. In normal cases, front-end developers don't need to craft such requests themselves.
Reference: https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
Magento 2 Api does not support pre-flight request by default. You can modify the apache or nginx server config for handling the request. For example http://snippi.com/s/or2myzn
I would suggest installing the following module for handling the CORS pre-flight request in Magento 2 Api:
https://github.com/splashlab/magento-2-cors-requests