$Lightning.use() function with access token

Question

Hello Community Experts,

• Whenever I use the access token into the $Lightning.use() function, It will give the Invalid session ID error and my component will not load on an external site.
• I have whitelisted the external site in CORS and also checked that the access token is generated and called the standard rest API it will work but the same access token passes to lightning.use it will not work what is the reason for that?
• Also, I have checked that when the access token is generated from the postman it will work and the component loaded into the external site. But I am generating an access token from the external site then it will not be rendered the component.
• Error show in console like:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://tushar-jadav-dev-ed.lightning.force.com/c/LWCMakePublic.app?aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 302.

Please help me where I am wrong.

PHP CODE:

<?php

header('Access-Control-Allow-Origin: *');    
$authentication = null;    
$client_id = "3MVG9pxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";    
$client_secret = "EB596C0C7xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";    
$username = "tusxxxxxxxxxxxxxxxx";    
$password = "Bixxxxxxxxxxxxxxxxxxxxxxxx";    
$loginurl = "https://tushar-jadav-dev-ed.my.salesforce.com/services/oauth2/token";

$params = "grant_type=password"    
        . "&client_id=" . $client_id    
        . "&client_secret=" . $client_secret    
        . "&username=" . $username    
        . "&password=" . $password;

$curl = curl_init( $loginurl );    
        curl_setopt( $curl, CURLOPT_HEADER, false );    
        curl_setopt( $curl, CURLOPT_RETURNTRANSFER, true );    
        curl_setopt( $curl, CURLOPT_POST, true );    
        curl_setopt( $curl, CURLOPT_POSTFIELDS, $params );    
        $json_response = curl_exec( $curl );       
        curl_close( $curl );

$authentication = json_decode( $json_response );

if ( isset( $authentication->access_token ) && $authentication->access_token != null ) {    
    echo '    
    <div id="lightning"></div>    
    <script src="https://tushar-jadav-dev-ed.lightning.force.com/lightning/lightning.out.js"></script>

    <script>    
        let host_Name = "https://tushar-jadav-dev-ed.lightning.force.com";
        console.log("host_Name :: "+host_Name);    
        $Lightning.use("c:LWCMakePublic", function() {    
        $Lightning.createComponent("c:mainTabComponent", { recordId:"0010o00002DkjenAAB"},    
              "lightning",    
              function(cmp) {    
                console.log("LWC component was created");    
                // do some stuff    
              }    
          );
            },

           host_Name,    
           "Bearer '.$authentication->access_token.'"    
          );    
    </script>';    
}      
?>

Answer 1

Instead of using

"Bearer '.$authentication->access_token.'"

directly pass the value in $authentication->access_token. That is how it worked for me recently