You need to sign in to do that
Don't have an account?
Nashle Pak
Lightning Out : Error 404, Blocked by CORS
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"
3. I added the code JS on the page of the site (SAP FIORI) which must display my component, here :
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?
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?
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!
All Answers
A little new!
I created my connected application to integrate my token in javascript but I still have the same error ...
Here are the creative settings of my connected app:
And the Javascript of integration:
The url to test my application that integrates javascript is as follows: https://nashle.github.io/lightningout/
Please help me !
In the app. Add that and it will work.
Thanks
Tushar Sharma
https://newstechnologystuff.com/
I thank you for my help !
I added
But it still does not work, I still have the same error message.
The code of my application is as follows:
The code for my expenses component did not change.
The integration JS script is:
I have add the domain in the CORS :
You can test the integration and see the error message at this address :
https://nashle.github.io/lightningout/
I did not create the community. You can see it in picture:
But now I have a 500 error.
You can view my page by this URL:
https://nashle.github.io/lightningout/js.html
Do you have any idea where this may come from?
Aloha !
Should I add my component to the community or do I need to set up a connected app? Do I have to go through a Lightning Web Component?
The new configuration is consulting on next page : https://nashle.github.io/lightningout/jsnewtest.html
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!