Issues with connecting my frontend to backend (React, axios, flask)

Mixed Content: The page at 'https://....github.io/app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://__.___.102.5/predict'. This request has been blocked; the content must be served over HTTPS.

createError.js:17 Uncaught (in promise) Error: Network Error
    at e.exports (createError.js:17)
    at XMLHttpRequest.p.onerror (xhr.js:87)

I created an app with React and also a backend using Flask. I deployed it both and changed my api call to localhost to actual address of the backend.

My API call in the react side looks like this:

// Call our ML API
                axios.post('http://localhost:5000/predict', {
                    address: res.data.results[0].formatted_address,
                    airport: this.state.selectedOption.value,
                    date: this.state.datetime,
                    transportation: this.state.selectedTrans.value,
                    fullname: this.state.fullname
                })
                    .then(res2 => {

                        { this.renderMessage((res2.data).split(".")[1]) }
                        if (this.state.allowSMS) {
                            axios.post('http://localhost:5000/sms', {
                                number: this.state.userPhone,
                                body: res2.data
                            })
                                .then(res3 => {
                                    console.log(res3)
                                })

                    .catch(error => { console.log('err',error)})
                        }
                    })
            })

This works fine when I call the localhost but when I call the deployed version it gives me the error on the top.

When I tried to change the security policy of the web to test it again (using http instead of https), it gave me a Cross Origin Policy error.

What is the reson of this issue?