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:
- lightning.out.js referenced in the page
- Lightning.use successfully placed in the script tag
- the lightning domain successfully placed as the 3rd argument of lightning.use
- access token successfully fetched via the apex controller and supplied as the 4th argument of lightning.use
- 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).
<apex:includeLightning />
tag and use lightning out from the same URL in the JS.