HTTPS error occurs in Cloudflare tunnel

Zero Trust Cloudflare Tunnel
1

hello. I have connected WordPress with a Cloudflare tunnel.

After connecting the tunnel, my website was forced to redirect to HTTPS and I’m experiencing an https error like Mixed Contents.

My webserver doesn’t have an https certificate, and my Ingress Rule and Server block are only set to port 80, as I thought the tunnel handles that part.

ingress:
  - hostname: tour.example.com
    service: http://localhost:80
    originRequest:
      noTLSVerify: true
  - service: http_status:404

I thought that simply changing the URL from http to https on the WordPress backend would fix this, but when I did, the admin page went into a redirect error (302).

Changing the site address from https to http in WordPress admin page will allow access, but will not resolve the https error.

I’m not sure where I’m misunderstanding. Can anyone advise me on how to resolve this issue?

Thank you

4

Hey @user20145

I’m sorry to hear that you’re facing an issue with mixed contents after connecting WordPress with Cloudflare.

I would firstly go through these two points and see how you get on;

  1. Load all resources via your HTML source without specifying the HTTP or HTTPS protocols. For example, using /domain.com/path/to.file instead of http://domain.com/path/to.file.
  2. Depending on your Content Management System, check for plugins that automatically rewrite HTTP resources to HTTPS. Cloudflare provides such a service via Automatic HTTPS Rewrites - https://developers.cloudflare.com/ssl/edge-certificates/additional-options/automatic-https-rewrites

There are also Developer Resources specifically targeted towards these sorts of issues, on Cloudflare’s Mixed Content Errors - https://developers.cloudflare.com/ssl/troubleshooting/mixed-content-errors/ page.