wordpress mixed content error - Is resolution on GCP possible?

Question

I have a python flask-cors code that is run on GCP compute engine and presents its output on port 3001. Lets say the physical address of my server instance is x1.x2.x3.x4.

I have a Javascript file named myJSFile.js which is a loaded by a javascript plugin. It contains the following lines of code (the rest of code not provided as it seems irrelavant to the issue):

  fetch('http://x1.x2.x3.x4:3001/p1', {
            method: 'POST',
            body: JSON.stringify({ message: text123 }),
            mode: 'cors',
            headers: {'Content-Type': 'application/json'},

myJSFile.js is shared in a public cloud bucket such that the plugin which will be embedded in public websites can access it.

When I run the plugin from a html file (locally on my compputer) it runs without any issues and results are provided.

When I run the plugin from a wordpress website aaa.com, I get the error:

Mixed Content: The page at 'https://aaa.com/' was loaded over HTTPS, but requested an insecure resource 'http://x1.x2.x3.x4:3001/p1'. This request has been blocked; the content must be served over HTTPS.

I have checked my compute engine instance properties and it shows "https traffic: On".

I tried changing http to https in the code, but did not resolve this issue. In the broswer, I see the error: "Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR"

On the server, I noticed the following error:

See error on Google compute engine

I noticed there are some workarounds for example this site in wordpress. However, to have a more general plugin, I am looking for a solution that allows me solve this by changing GCP settings or changes to my code. Any advice is extremely appreciated; also, if there is any suggestion on how to enhance my current approach to sharing js file please let me know.