HTTP CORS

[alexandred8025]

Good evening,

I am presenting my problem to you. I am using magento version 2.4, I need to retrieve data from a webservice, here is what I have already done:
.htaccess =>

<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
Header set X-UA-Compatible "IE = edge"
# `mod_headers` cannot match based on the content-type, however,
# the `X-UA-Compatible` response header should be send only for
# HTML documents and not for the other resources.

<FilesMatch "\. (Appcache | atom | bbaw | bmp | crx | css | cur | eot | f4 [abpv] | flv | geojson | gif | htc | ico | jpe? G | js | json (ld)? | M4 [av] | manifest | map | mp4 | oex | og [agv] | opus | otf | pdf | png | rdf | rss | safariextz | svgz? | swf | topojson | tt [cf] | txt | vcard | vcf | vtt | webapp | web [mp] | webmanifest | woff2? | xloc | xml | xpi) $ ">
Header unset X-UA-Compatible

</FilesMatch>

</IfModule>

I call it from the theme, here => 

/var/www/html/app/design/frontend/Sm/autostore/Magento_Theme/web/js/file.js

Here is the content of the JS file =>

require(["js/file"], function() {

//ajax request
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.setRequestHeader("Content-type", "application/json");
    req.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("error with url " + url);
    });
    
    req.send(null);
}

var marquesElt = document.getElementById("test");
ajaxGet("********l", function (res) {
    // Transforme la réponse en un tableau
    var mark= JSON.parse(res);
    console.log(res);
    marques.forEach(function (mark) {
        // build list

    });
});

function optionselect(){
    var maselection = document.getElementById("test").value;
    if(maselection!== null){
        alert(myselection);
    }
    else{
        alert("null");
    }
}
});

And this is what is displayed in the browser console =>

Access to XMLHttpRequest at '****' from origin 'myorigin' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
file.js:30 error with url ****
(anonymous) @ file.js:30
error (async)
ajaxGet @ file.js:29
(anonymous) @ file.js:37
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
requirejs @ require.js:1737
(anonymous) @ requirejs-config.js:120
(anonymous) @ requirejs-config.js:127
(anonymous) @ requirejs-config.js:1198
file.js:33 GET *** net::ERR_FAILED

Please I really need some help figuring out what to do. Thanks 

[snehagowda11ff]

One can use this plug in installed  https://github.com/graycoreio/magento2-cors

add the configurations to app/etc/env.php, add the appropriate origin to the cors_allowed_origins.

sample example below

'system' => [
        'default' => [
            'web' => [
                'graphql' => [
                    'cors_allowed_origins' => 'http://localhost:3000',
                    'cors_allowed_methods' => 'POST, OPTIONS,PUT,GET,DELETE',
                    'cors_allowed_headers' => 'Content-Currency, Store, X-Magento-Cache-Id, X-Captcha, Content-Type, Authorization, DNT, TE',
                    'cors_max_age' => '86400',
                    'cors_allow_credentials' => 5
                ],
                'api_rest' => [
                    'cors_allowed_origins' => 'http://localhost:3000',
                    'cors_allowed_methods' => 'GET, POST, OPTIONS, DELETE, PUT',
                    'cors_allowed_headers' => 'Content-Currency, Store, X-Magento-Cache-Id, X-Captcha, Content-Type, Authorization, DNT, TE',
                    'cors_max_age' => '86400',
                    'cors_allow_credentials' => 5
                ]
            ]
        ]
    ]