App Proxy Not Working Because Of 'Mixed Content': Redirect From Https To Http

[phillipmohr]

Issue summary

I'm trying to send an API request from my frontend (app extension) to the backend and receiving the data. I have configured ngrok and set up an app proxy as mentioned in this tutorial.

I started ngrok with ngrok http 9292.

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

App URL: https://my-ngrok-url.ngrok-free.app/
Allowed redirection URL(s)
https://my-ngrok-url.ngrok-free.app.ngrok-free.app/auth/callback
https://my-ngrok-url.ngrok-free.app.ngrok-free.app/auth/shopify/callback
https://my-ngrok-url.ngrok-free.app.ngrok-free.app/api/auth/callback

App proxy:
Subpath prefix: apps
Subpath: stock-light-inventory
https://my-ngrok-url.ngrok-free.app/api

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('getting here')
res.status(200).send("success")
});

• @shopify/shopify-app-express version: 2.2.0
• Node version: v20.4.0
• Operating system: MacOS Ventura 13.0.1

Expected behavior

I should get a response 200 with the string "success" and the console log 'getting here'

Actual behavior

For some reason it gets redirected to the password page...
Error:

face-t-shirt:1 Mixed Content: The page at 'https://my-ngrok-url.ngrok-free.app/products/face-t-shirt' was loaded over HTTPS, but requested an insecure resource 'http://my-ngrok-url.ngrok-free.app/password?_fd=0'. This request has been blocked; the content must be served over HTTPS. b8fdbaf4fw0d61995cpb28c2e07mc135acbem.js:1 Uncaught (in promise) TypeError: Failed to fetch at E.e.fetch (b8fdbaf4fw0d61995cpb28c2e07mc135acbem.js:1:25301) at e.fetch (shop_events_listener-65cd0ba3fcd81a1df33f2510ec5bcf8c0e0958653b50e3965ec972dd638ee13f.js:1:7885) at face-t-shirt:2918:2

Any help would be much appreciate it!