Progressive Web App HTTPS to HTTP Requests

Question

I'm creating a Progressive web app and need to make requests to an API which is HTTP and doesn't have HTTPS. Can't change the app to HTTP as PWA's require HTTPS, can't change request link to https.

Getting this error:

Mixed Content: The page at 'https://current-site.herokuapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://the-api.com/api/customer?$filter=contains(CustomerName,%20%27test%27)&$select=CustomerName,CustomerId&$top=10'. This request has been blocked; the content must be served over HTTPS.

Hoping there's a way around this. Currently using nodejs and express to serve. Requests are being made from frontend vuejs with axios.

Thanks for helping.

Answer 1

Shy of using an insecure or old browser, or telling your users to use some command line flags before surfing the web, there is not a direct method for this. This is by design and would be a major security flaw if apps could do this directly.

However, if you're determined to use the insecure API, you can write an HTTPS proxy API on your server, that turns around and does the request to the real API over HTTP.