1

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

  • Recommended approach is to do this with a public access community which I've written up below. If this is running on a force.com site what user is the access token from? Generally, if you are embedding in a VF page you do not include the optional accesstoken parameter. Also, I don't think those are the right lightning out URLs. Those look like internal SF urls which will not include the right CORS headers for unauthenticated users. Try and switch the page to use <apex:includeLightning /> tag and use lightning out from the same URL in the JS. – Greg Grinberg Mar 21 at 17:50
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.