[SalesForce] Lightning Out: CORS error even after whitelisting force.com site

I have a force.com site. I access one visualforce page from this site. On this vf page is a lightning-out application. All of the lightning-out requirements to run on a vf page has been set:

1. lightning.out.js referenced in the page
2. Lightning.use successfully placed in the script tag
3. the lightning domain successfully placed as the 3rd argument of lightning.use
4. access token successfully fetched via the apex controller and supplied as the 4th argument of lightning.use
5. the force.com site domain name (https://.cs##.force.com) whitelisted in CORS

Actual code on the vfpage:

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" controller="MyController">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ourcompany--sandbox.lightning.force.com/lightning/lightning.out.js"></script>
    <style type="text/css">
        body {
            padding: 1em;
            font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 15px;
            color: #b9b9b9;
            background-color: #e3e3e3;
        }
    </style>
    <div id="appSection" />
    <script>
        $Lightning.use("c:thelightningapp", function() {
            $Lightning.createComponent("c:dispatcher", {}, "appSection", function(cmp) {
                console.log('done');
            });
        }, 'https://ourcompany--sandbox.lightning.force.com', '{!accessToken}');
    </script>
</apex:page>

The problem now is this. When I load the page, i see an OPTIONS call. The call returns the following headers:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: X-SFDC-Request-Id,authorization
Access-Control-Allow-Methods: HEAD, GET, POST, PUT, PATCH, DELETE
Access-Control-Allow-Origin: https://devsite-name.cs72.force.com

Even with these response headers (which as I understand, allows the CORS requests from the origin [devsite-name.cs72.force.com] to salesforce [ourcompany–sandbox.lightning.force.com]), I still get a CORS error: Access to XMLHttpRequest at 'https://ourcompany--sandbox.lightning.force.com/c/thelightningapp.app?aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT' from origin 'https://devsite-name.cs72.force.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My assumption is that this is happening because after the OPTIONS call, the browser tries to do a GET request to the lightning domain I specified, but that domain returns a 302 redirect, forcing the browser to do another request to the classic domain. I have a feeling that this redirection causes the error but I don't have enough proof. And even if this salesforce redirection really did fire the CORS error, how do I get passed or around it?

By the way, the force.com site (devsite-name.cs72.force.com) is inside the same org (ourcompany–sandbox.lightning.force.com).