I have a Flutter Web application that I have deployed on Firebase Hosting.

I have a Django backend that I have deployed on an EC2 instance and is running on http. I have CORS enabled in the backend, tried accessing endpoints via browsers and it works just fine.

But, when I try to make the same call using FlutterWeb, it fails. And error type of blocked:mixed content appears. (See image below)

I want to call those HTTP endpoints and I don't want an SSL certificate mess because this is just a college project. How do I fix this?

I am using Dio on Flutter Web to make requests. What would be causing this problem?

EDIT: I am using Firebase's spark plan, obviously since it's a college project. Do I need to upgrade to the blaze plan to enable Egress traffic? If so, how do I make sure that I won't be heavily charged? Any suggestions? UPDATE: I tried the blaze plan and got the same issue.

The console says

Mixed Content: The page at 'https://xxx.web.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://xxxx.compute-1.amazonaws.com:8000/menu'. This request has been blocked; the content must be served over HTTPS.

Any way to bypass this?