I'd like to preface this by saying that this is my first real full-stack application, and I am by no means a knowledgeable webmaster.
Context
My website, testwebsite.com, has a ReactJS frontend and is running on Ubuntu 20.04 on a Caddy webserver. There is a Python Flask API running on the same server. Flask is running on port 3000 on 0.0.0.0. The website is using Caddy's default self-signed HTTPS. Flask is using a certificate and key created by ZeroSSL. I am using Google Chrome to access my website.
Problem
The users are able to access the website with HTTPS without any problems. The problem arises from the website's backend Flask API. Every 5 seconds, the React frontend uses fetch to query the Flask API at the website's external IP address, which looks like this:
const response = await fetch("https://123.123.123.123:3000/testing" ...
However, these calls do not reach the Flask server, and I get the following error in the console:
GET https://123.123.123.123:3000/testing net::ERR_CERT_COMMON_NAME_INVALID
Attempts to solve
I have tried using the Caddy certificate and key on the Flask server.
I have tried running Flask on 127.0.0.1 and replacing the IP address in the Fetch call with 127.0.0.1
I have tried running the API without SSL and made API calls using http://. This caused a different SSL error.
I have tried using certificates from the DNS provider, Cloudflare, but this is unsuccessful, as they are not trusted by the browser.
I have tried running the Flask server in adhoc mode. This yields a different SSL error about the CA authority not being trusted.
I have tried using Apache as the webserver, but I was using Cloudflare's 'hybrid' DNS and did not try resolving this with Cloudflare certificates. I don't have high hopes.
I have tried running Flask in CORS to avoid any possible CORS errors. I suspect that this may not be a perfect solution, though, and may be part of the reason that
fetch()calls to 127.0.0.1:3000 are not making it through to the flask server. I get a "connection refused" error in the console.
Any suggestions?
I've been stuck on this for weeks. Any and all suggestions are welcome. I would simply like the website to be secured with HTTPS and also be able to call my API. I don't even care if the Flask API has to run on a separate server, without any TLS. I just want it to work. Ideally, I'd be able to call the Flask API without the need for any SSL, but it seems like if I want the website to have SSL, the API must also be secured with SSL.
