Hello,

I am new to Salesforce and trying to embed Einsteins Dashboard on an external heroku app.(after going thru some web blogs)

I have created a  HTML page with some JavaScript and connected app for authetication.
In this page, we are doing  an authentication with Salesforce and then use the Lightning Out to create the Lightning App and the Aura component.

aura component:
<aura:component access="global" > <wave:waveDashboard dashboardId="PUT_ID_OF_YOUR_ANALYTICS_DASHBOARD_HERE" height="650" /> </aura:component>

App:
<aura:application access="Global" extends="ltng:outApp" > <aura:dependency resource="c:AnalyticsDashboardCMP" type="COMPONENT"/> </aura:application>

Heroku deployment files:

A php file with below code
<?php header( 'Location: /Dashboard.html'); ?>

HTML file having the lighning out code 

<script src="https://hpeeee-dev-ed.lightning.force.com/lightning/lightning.out.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script>
         var token;
         var clientID='XXXXXXXX';
         var clientSecret = 'XXXXXXXX';
         
         var OAuthURL='https://login.salesforce.com/services/oauth2/authorize?client_id='+clientID+'&client_secret='+clientSecret+'&response_type=token&redirect_uri=https://my-exampleanubhav.herokuapp.com/Dashboard.html'
                           
         $(document).ready(function(){
         
             var decodedUrl= decodeURIComponent(window.location.href);
             var tokenLiteral='access_token=';
             
             if(decodedUrl.includes(tokenLiteral)){
                var start = decodedUrl.indexOf(tokenLiteral) + tokenLiteral.length;
                var stringEnd = decodedUrl.indexOf('&');
                token = decodedUrl.substring(start,stringEnd);
                console.log(token);
             }
             else
                alert('Starting Authentication');
             
             if(token)
                alert('Authentication Complete! :)');//('We got the token! :D *hopefully the right one!*');
             else
                window.location = OAuthURL;
             
         });
         
         function initializeApp(){
            //document.getElementById("spinner").style.display = "block";
         
             var url='https://hpeeee-dev-ed.my.salesforce.com/';
             var appName='c:EADashboardApp';
             //$Lightning.use(appName, function() {document.getElementById("spinner").style.display = "none"; createComponent();}, url, token);
             $Lightning.use("c:EADashboardApp", function() {createComponent()}, url, token);
         
         }
         
         function createComponent(){
            alert('Enter createComponent')
             $Lightning.createComponent(
                 "c:AnalyticsDashboardCMP", 
                 {
                     accessToken: token
                 }, 
                 "dashboard"
             ); 
            alert('Ending createComponent')
         }
      </script>

Th authentication is happening properly but while trying to cal the dashboard component, it is throwing below error

Access to XMLHttpRequest at 'https://hpeeee-dev-ed.my.salesforce.com//c/EADashboardApp.app?aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT' from origin 'https://my-exampleanubhav.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have added "https://my-exampleanubhav.herokuapp.com" URL to  Analytics Whitelist, CORS & CSP Trusted Sites in Salesforce Setup.

Connected App Call back URL used:
https://my-exampleanubhav.herokuapp.com/Dashboard.html

Any pointers to resolve the error.

Thanks You