Node Js make call to http python flask server

Question

I have a machine learning model, I have made an API out of it, and hosted a flask server to make it accessible as such

server = '192.168.71.53'
port = 5000

app = Flask(__name__)
app.config['CORS_HEADERS'] = 'Content-Type'

cors = CORS(app, resources={r"/get_faces":{"origins":"http://"+server+":"+str(port)}})

@app.route('/call_method', methods=["POST"])
@cross_origin(origin=server, headers=['Content- Type','Authorization'])
def call_model():
    return response

if __name__ == "__main__":
        app.run(host=server, port=port )

I then created a front end in Node JS that posts a request to this method via the server and IP using this

axios.post('http://192.168.71.53:5000/call_method', dataJson)
            .then(response => {
                # process data }  }  })

The program runs fine on localhost, i ran into an issue when running the website on an ip, chrome won't let me access the camera in Node Js if i don't have a HTTPS connection, so i deployed the website on a link, and tried to access it, the camera works now but it won't post a request to my flask server, i looked into it and i read that HTTPS cant make call to HTTP, so i set up flask to HTTPS via using this

context = ('certificate.pem', 'key.pem')
app.run(host=server, port=port , ssl_context=context)

Now whenever i post a request, chrome gives a net::ERR_CERT_AUTHORITY_INVALID error

so i decided to post a http request rather than https request, for that i had to add this to my html file

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 

this gives me a net::ERR_SSL_PROTOCOL_ERROR error on chrome and code 400, message Bad HTTP/0.9 request type HTTPStatus.BAD_REQUEST - error on flask

I have tried several other things and nothing seems to work, can someone please help me out with this? I have been struggling with this for well over 2 weeks now

Answer 1

There are a few different things going on here. Let's try and break them down.

1. Firstly, your app needs to run on HTTPS securely to be allowed camera permissions as you have discovered. While developing your app, if you host it on localhost and access it through a http://localhost:port url, then you can still access camera permissions without HTTPS. This is a concession made only for the localhost to make developing easier.

2. On to the next part with flask and HTTPS. From the looks of it, you generated a certificate and passed that on to flask to serve HTTPS traffic. This did not work because you used a self-signed certificate. A self-signed certificate as the name implies is signed by an individual (you) and cannot be used to verify a web server's identity. Thish is why you got the net::ERR_CERT_AUTHORITY_INVALID error. Chrome is telling you that it does not recogonise the Certificate Authority (you) who signed the certificate.

   The fix for this again is to just run everything on localhost for development. You do not have to worry about HTTPS before you are ready to deploy your code.

3. Why did you have to add this: <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> to make an http post request? This tells the browser to upgrade a HTTP connection to a HTTPS connection. So when your js code sent a HTTP POST request, this meta tag upgraded that connection to HTTPS, which then failed with net:ERR_SSL_PROTOCOL_ERROR because flask was no longer listening with HTTPS enabled. Flask threw a 400 protocol error because chrome tried to upgrade its HTTP connection to a HTTPS connection which flask did not understand.

In summation, run everything on localhost and you will not need to mess about with HTTPS until you really need to.