Lightning Out : getting “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” from Heroku App

———- THE EXPLANATION ———-
I need to use my LWC's in an External Site. For it I use Lightning Out, and I want to test it with Heroku App.
I have built a simple Aura Application according to documentation here : Lightning Out Dependencies

<aura:application access="Global"  extends="ltng:outApp" >
    <aura:dependency resource="c:ltng_out_testLwc"/>
</aura:application>

The ltng_out_testLwc is simple LWC without complex logic:

<template>
    <lightning-card title="Test LWC" icon-name="utility:print">
        Test LWC
    </lightning-card>
</template>

Then I've created a simple Heroku App with connecting it to my Github private repository, following the instructions here:
[10 Step Guide] How to deploy HTML on Heroku app the quick and easy way!

Where I have a simple index.html page, which should show my LWC.

I have not implemented logic for obtaining the access token from the Heroku App (Could it be the issue ?)
So I obtain the access token in Postman, and then hardcode it in the App:

The Lightning domain I take from (In Lightning) Setup => Company Settings => My Domain => My Domain Name

And then build it in next way : "https://" + My Domain Name + ".my.salesforce.com"

The Code for the page (in order to show it here I changed the exact domain to "my-domain", and I changed the Access Token to "access-token" ):

<div id="lightning"></div>
<script src="https://my-domain.my.salesforce.com/lightning/lightning.out.js"></script>
<script>
    $Lightning.use("c:LightningOutDemo",
        function() {
            $Lightning.createComponent(
                "c:ltng_out_testLwc", 
                {},
                "lightning",
                function(cmp) {
                    console.log("LWC component was created");
                }
            );
        },
        'https://my-domain.my.salesforce.com',
        'access-token'
    );
</script>

For Access Token I have created a Connected App and I take it from there.

I have added my Heroku App origin to CORS and enabled it :

Also I have added my Heroku App origin to CSP Trusted Sites

and to Remote Site Settings

———- THE ERROR ———-

However I am still getting the following error (in order to show it here I changed my Heroku App Name to heroku-app) :

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

Browser Console :

So I am getting the 401 response :

It does work if I use it in a Visualforce Page with Lightning Out.

Example of code for it :

<apex:page >
    <apex:includeLightning />
    <div id="lightning" />
    <script>
        $Lightning.use("c:lightningOutDemo", function () {
            $Lightning.createComponent("c:ltng_out_testLwc",
                {  },
                "lightning",
                function (cmp) {
                    console.log("LWC component was created");
                }
            );
        });
    </script>
</apex:page>

I have read a lot of articles and questions about it (some of them listed below). However none of them helped me.

Lightning Out : Error 404, Blocked by CORS
Lightning Out : Error 404, Blocked by CORS developer forum
CORS issue with lightning out used in external website
Lightning Out: CORS error even after whitelisting force.com site
Lightning Out session expired from external page
lightning out gives "No 'Access-Control-Allow-Origin'
Use Lightning Web Components in External Website – Lightning Out
Cross-origin resource sharing(CORS) and Salesforce APIs

I hope that someone has already faced and resolved this issue.

Any help will be appreciated.

Thank you