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

Question

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).

Answer 1

It's not intuitive but the expected way to embed lightning components for guest users is with a public access community rather than a force.com site directly.

I believe you can make it work with a force.com site but if you have communities enabled in the org that is the better supported approach.

Steps

1. Create and activate a "SF Tabs and VF" community
2. Add the VF page to community
3. Grant public access to the community
4. Add the VF page to the guest user profile
5. Add the ltng:allowGuestAccess interface to the Lightning component.

On your Visualforce page both the script tag and the lightning.use url should be pulling from the community domain rather than the sandbox lightning out URL.

https://yourCommunityDomain/communityURL/lightning/lightning.out.js