To test Lightning Out on an external site, I use the application created in the "Aura Components Basics" module: expensesApp

This one works very well the proof in image:

My app in Lightning Experience

Pour To make my application available with lightning out, I helped myself to this blog: https://newstechnologystuff.com/2019/05/28/use-lightning-web-components-in-lightning-out/

  1. I add the url of site which must integrate my application in the CORS
  2. I created a new dedicated application for lightning out "LightOutApp"
    <aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
    <aura:dependency resource="c:expenses" type="COMPONENT"/>

Here's the code for my expenses component :

    <aura:component controller="ExpensesController">
    <aura:attribute name="expenses" type="Expense__c[]"/>
    <aura:handler name="updateExpense" event="c:expensesItemUpdate"
    <aura:handler name="createExpense" event="c:expensesItemUpdate"
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
            <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Expenses</h1>
                <h2 class="slds-text-heading--medium">My Expenses</h2>
    <!-- / PAGE HEADER -->
    <!-- NEW EXPENSE FORM -->
    <lightning:layout >
        <lightning:layoutItem padding="around-small" size="6">
        <lightning:layoutItem padding="around-small" size="6">
            <c:expensesList expenses="{!v.expenses}"/>
        <lightning:layoutItem padding="around-small" size="6">
            Put something cool here
  1. I added the code JS on the page of the site which must display my component, here :
<div id="lightning"></div>
<script src="https://playful-fox-o26ov9-dev-ed.lightning.force.com/lightning/lightning.out.js"></script>
     $Lightning.use("c:LightOutApp", function() {
        $Lightning.createComponent("c:expenses", {
             authToken: "3MVG9Ve.2wqUVx_Z3nFMx_ytwdm0WnBAnowDB1mvO.d6trt4DDAipWp7tno3.lNL2YWT.jj0h0MHoxKTObe3D"
              function(cmp) {
                console.log("component was created");
                // do some stuff

but when I load the page, I always get the following error in my chrome JS console:

Access to XMLHttpRequest at 'https://playful-fox-o26ov9-dev-ed.lightning.force.com//c/LightOutApp.app?aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT' from origin 'https://webidetesting6929559-p2000088220trial.dispatcher.hanatrial.ondemand.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. /webapp/resources/sap/ui/core/messagebundle_fr_FR.properties:1 Failed to load resource: the server responded with a status of 404 ()

I forgot something ? The syntax of my code is not good?

You can test the integration and see the error message at this address :


Here is the picture of my CORS:


I wonder if this comes from the configuration of the Online Application or the fact that it may be necessary to activate community. Do you know what settings I need to fill in when I create my Connected App?

So you need to configure a community to access my lightning-out application on a third-party portal that does not have to be hosted by the community to provide access rights?

I implement ltng: allowGuestAccess "to Share Lightning App with Non-Authenticaded Users.


  • Can you include a picture of your CORS setting in your SF environment? lightning/setup/CorsWhitelistEntries/home relative URL path of where this setting is in lightning Commented Nov 20, 2019 at 17:51

2 Answers 2


I ran into this same issue today. I had not input a name for the community in the URL string available from the Administration area in Workspaces.

Once I added a name at the end of the URL string and updated my scripts, the lightning out app started writing to the console log the debug lines I added to ensure it was working from my test site.

enter image description here

enter image description here


This morning, I used Lightning Out with the Lightning Web Components and there, magically, it works perfectly!

So I will train at the LWC.

I would like to understand why integration does not work.

If anyone understands where it comes from, I'm waiting for you here!

  • What did you follow here?
    – user8560
    Commented Apr 7, 2021 at 16:03
  • Hi, I also use Lightning Out with the Lightning Web Components, however I am facing the same issue that you did. How did you resolve it ?? Commented Jun 10, 2022 at 21:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .