Hello Ohana !


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:
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">
    <aura:dependency resource="c:expenses" type="COMPONENT"/>
</aura:application>

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"
                  action="{!c.handleUpdateExpense}"/>
    <aura:handler name="createExpense" event="c:expensesItemUpdate"
                  action="{!c.handleCreateExpense}"/>
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
        </lightning:layoutItem>
        <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>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / PAGE HEADER -->
    <!-- NEW EXPENSE FORM -->
    <lightning:layout >
        <lightning:layoutItem padding="around-small" size="6">
            <c:expenseForm/>
        </lightning:layoutItem>
    </lightning:layout>
    
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
            <c:expensesList expenses="{!v.expenses}"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small" size="6">
            Put something cool here
        </lightning:layoutItem>
    </lightning:layout>
    
</aura:component>

3. I added the code JS on the page of the site (SAP FIORI) which must display my component, here :
 

<div id="lightningLocator"></div>
<script src="https://playful-fox-o26ov9-dev-ed.lightning.force.com/lightning/lightning.out.js"></script>
<script>
    $Lightning.use("c:LightOutApp",    // name of the Lightning app
        function() {                  // Callback once framework and app loaded
            $Lightning.createComponent(
                "c:expenses", // top-level component of your app
                { },                  // attributes to set on the component when created
                "lightningLocator",   // the DOM location to insert the component
                function(cmp) {
                    // callback when component is created and active on the page
                    console.log("LApp was created")
                }
            );
        },
        'https://playful-fox-o26ov9-dev-ed.lightning.force.com/'
    );
</script>

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?