Scenario

Your frontend is finally complete, congratulations! Now you just need to deploy to vercel and add your cloudflare managed domain.

You go over to vercel and create a deployment from a github repository, probably. And it deploys just fine. Now it's time to add the secret sauce, your custom domain.

You choose the default settings and head over to cloudflare dashboard to change the DNS settings to point to vercel's servers. You've done these DNS setttings before, nothing can go wrong, right? Well DNS is a world of mystery and terror (mostly).

LGTM! SHIP IT

Oops, the ship has sunk.

Stop before you clear cookies, reinstall your browser or worse.

Why Does This Happen

This is due to SSL/TLS being set to "Flexible" in the cloudlare dashboard for your domain. When SSL/TLS is set to flexible cloudflare servers may send HTTP to Vercel's servers. Vercel's servers do not like HTTP when there is a certificate present for your domain, which is automatically assigned by Vercel after you change the DNS settings.

Vercel also has a guide about this, you can check that out as well.

The Fix

To fix this, find the SSL/TLS settings in the cloudflare dashboard.

Yep, it's set to flexible. Let's change that.

And we are done! It should start working in a minute at most.

As you can see, we are living on the edge.

Thanks for reading. Let me know in the comments if you have any questions or suggestions!