Issue with CORS connectivity from S3 to an external domain URL on Heroku App

Question

I am a starter on AWS and having some issues when using a simple S3 bucket to host an Angular website with a backend hosted on Heroku. For the initial start, I have hosted the site on my localhost (via Heroku server) along with the DB also living on the Heroku backend. Now I am planning on doing a shift to AWS and have been following tutorials to shift the /dist to AWS S3 (by uploading the files there):

https://johnlouros.com/blog/host-your-angular-app-in-aws-s3

EC2 or S3 to host AngularJS app?

https://angular.io/guide/deployment

I have used the "ng build --prod" to ensure that the /dist files are best for the production server and then created an S3 bucket and uploaded the files there. Making the URL public and also the uploaded files, without any restrictions.

I currently do not wish to shift the backend DB to AWS, as it is a bit more complex to do it and will take time, which I want to save currently (by not having to refactor too much code).

My issue is that the Angular code refers to the Heroku server for its backend data and when I upload the files to the S3 bucket, I am unable to get results from the Heroku API/Server. I get a result as a CORS error, which basically means that the S3/AWS cannot connect to the Heroku server URL for serving the API's or the URL.

I get the following error (on Chrome):

/#/login:1 Access to XMLHttpRequest at 'https://mydemmoserver1.herokuapp.com/api/login' from origin 'http://myapp-li76.s3-website-ap-southeast-2.amazonaws.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Or on Ms Edge:

SEC7120: [CORS] The origin 'http://myapp-li76.s3-website-ap-southeast-2.amazonaws.com' did not find 'http://myapp-li76.s3-website-ap-southeast-2.amazonaws.com' in the Access-Control-Allow-Origin response header for cross-origin  resource at 'https://mydemmoserver1.herokuapp.com/api/login'.

I have tried using the instructions given on the following:

XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

S3 - Access-Control-Allow-Origin Header

CORS Policy is blocking access to the URL.

Have followed instructions on Heroku to debug and resolve the issue:

https://devcenter.heroku.com/articles/bucketeer

but unable to get a solution for now.

Has anyone uploaded code to S3 to serve as a static website, which connects to an external URL and gets data via API from there? If so, possible to provide some guidelines on where I could be going wrong, or if there is anything additional that I need to do on the AWS end?

I have updated the CORS Policy, as given in the answer below to:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://mydemmoserver1.herokuapp.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>http://mydemmoserver1.herokuapp.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://mydemmoserver1.herokuapp.com/api/login</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>http://mydemmoserver1.herokuapp.com/api/login</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://mydemmoserver1.herokuapp.com/*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>http://myapp-li76.s3-website-ap-southeast-2.amazonaws.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

But it still does not work :-(

Any help on this would be great!