App proxy not working because of 'mixed content': redirect from https to http

[phillip12]

Hello, 

I'm using the Shopify CLI3 and have the React NodeJS starter template. For the tunnel I'm using ngrok.

I'm trying to call an API from the server and send the data back to the frontend (my app extension). 

But I'm getting an error: Mixed Content: The page at 'https://route-to-ngrok.ngrok-free.app/products/t-shirt' was loaded over HTTPS, but requested an insecure resource 'http://route-to-ngrok.ngrok-free.app/password'. This request has been blocked; the content must be served over HTTPS.

I'm doing my API call like this:

extensions/my-extension/blocks/stock_light.liquid

<script>
console.log('fetch running12345678')
fetch('/apps/stock-light-inventory/get-inventory/' + "1234567", {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'ngrok-skip-browser-warning': 'true'
},
})
.then(response => response.json())
.then(data => {
console.log('data is:')
console.log(data)
});
</script>

web/index.js

app.get('/api/get-inventory/:variant_id', (req, res) => {
// Respond with the data
console.log('gettin here')
res.status(200).send("sucess")
});

I started ngrok like this:

ngrok http 9292

In my App setup in my partner login I have set everything to my tunnel URL.

App URL: https://route-to-ngrok.ngrok-free.app

Allowed redirection URL(s)

https://route-to-ngrok.ngrok-free.app/auth/callback
https://route-to-ngrok.ngrok-free.app/auth/shopify/callback
https://route-to-ngrok.ngrok-free.app/api/auth/callback

App proxy:

Subpath prefix: apps

Subpath: stock-light-inventory

https://route-to-nrgok.ngrok-free.app/api

Can anyone help? 

[NikilMethew]

Hi, @phillip12 

Do you fix this issue or do you have any idea about this since I am facing the same issue now?