Images are failing to load after Zeit deployment

[ahmedmusawir]

I'm accessing TvMaze API which is https and Zeit is using https. But after deployment none of my images are being loaded here: https://next-simple-starter-uhnprynavy.now.sh/articles Code: https://github.com/ahmedmusawir/moose-next-pwa-rdx-bp

with this error:

workbox-core.prod.js:1 Mixed Content: The page at 'https://next-simple-starter-uhnprynavy.now.sh/sw.js' was loaded over HTTPS, but requested an insecure resource 'http://static.tvmaze.com/uploads/images/medium_portrait/136/342479.jpg'. This request has been blocked; the content must be served over HTTPS.

The same app is working fine here using other boilerplate. Here: https://next-boilerplate-stsxcshqwn.now.sh/articles Code: https://github.com/ahmedmusawir/next-boilerplate-1

I'm pretty new at this. Just looking for some help. Thanx.

[ooade]

You're serving insecure requests that's why it's been blocked. And, service workers only allow secured origins. I checked your API, saw it was only serving http url for images. One way to fix this is to add

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

to your _document.js file, so it will have you upgrade the insecure requests.