[FIXED] How to send fetch request from HTTPS to a HTTP server : Mixed Content error

Issue

I am using a NextJs app where I am using a simple fetch to send some POST data.

We I used app on localhost it worked fine but when I put it on the server it got following error.

Mixed Content: The page at 'https://speechwithai.com/home' was loaded over HTTPS, but requested an insecure resource 'http://18.224.190.161:5000/fileToText'. This request has been blocked; the content must be served over HTTPS.

The from and to are both on same IP address (https://speechwithai.com/). At the back I am running NGINX to server WebAPP at port 80 and Flask REST API at 5000. I am using Flask because I needed python libraries to process some files.

I tried multiple post but I did not find any solution. Could someone please help me?

All I want is to send a request to my FLASK API server which is running

http://someIPAddress:5000 from https://myLiveNextJsApplication.com

Solution

Since both servers are running behind same server and you already have nginx setup.

follow these steps

1. setup reverse proxy for flask with some thing like below

events {}
http {
  server {
    listen 443;
    location /flask_api {
      proxy_pass http://127.0.0.1:5000/;
    }

nginx configuration resides in /etc/nginx/nginx.conf . For more information visit https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/

2. configure ui to use this flask_api url = https://speechwithai.com/flask_api

3. update flask path route to use /flask_api

Answered By - prasanth