Map preview does not work when using reverse proxy with HTTPS

[SeanWong24]

It gives "Mixed Content" error when accessing map preview. It still fetches assets through the HTTP protocol.

[brendan-ward]

I do not get this error when using the preview for a vector tiles service (Mapbox GL preview) on a server where I'm using a reverse proxy (Caddy v2) in front of mbtileserver.

Are you experiencing this issue with a vector tiles or image tiles preview (which is in Leaflet)? What reverse proxy are you using? Can you specify one or two of the assets that is showing up as requested via HTTP when the preview is accessed via HTTPS?

[SeanWong24]

I am using NGINX with the config copying from the readme file and for a vector tiles service.

I am getting these: Mixed Content: The page at 'https://<my-service-path>/map' was loaded over HTTPS, but requested an insecure script 'http://<my-service-path>/map/static/index.js'. This request has been blocked; the content must be served over HTTPS. Mixed Content: The page at 'https://<my-service-path>/map' was loaded over HTTPS, but requested an insecure stylesheet 'http://<my-service-path>/map/static/index.css'. This request has been blocked; the content must be served over HTTPS. Uncaught ReferenceError: mapboxgl is not defined at map:96:13

I tried to override <script> and <link> tag's url to // instead of http:// from the browser dev tools, the page is loaded but the map tiles are also fetched through HTTP with the following error: Mixed Content: The page at 'blob:https://<my-domian>/5c2521f1-bf6b-42a9-9c4a-6ad65428b0a1' was loaded over HTTPS, but requested an insecure resource 'http://<my-service-path>/tiles/1/1/1.pbf'. This request has been blocked; the content must be served over HTTPS.

I also noticed that when accessing the tileset url, the returned JSON has "map" and "tiles" properties starting with "http://".

I am also using Docker to run the mbtileserver and am not sure if that would be an issue.

[brendan-ward]

It looks like our nginx config example is not complete in this case.

Just above the config example, we have a note about setting additional headers in your reverse proxy:

Scheme (HTTP vs HTTPS): one of X-Forwarded-Proto, X-Forwarded-Protocol, X-Url-Scheme to set the scheme of the request. OR X-Forwarded-Ssl to automatically set the scheme to HTTPS

Did you try one of those as well? If one of those works, please share the config that worked and I'll add it to the example config in the README.

[SeanWong24]

Thanks for pointing out that the additional header config, which I did not see. I did a quick search and added proxy_set_header X-Forwarded-Ssl on;. It seems to work for me now.

[morandd]

Please consider adding proxy_set_header X-Forwarded-Ssl on; to the example nginx reverse proxy config file. Yes, I know it is written in the documentation above. But this is such a common use case it is worth having included the default example (which 99% of people, yours truly included, will simply copy and paste, encounter the Mixed Content error, and then find this thread).

[brendan-ward]

Added proxy_set_header X-Forwarded-Ssl on; to README; thanks!