Skip to main content

Command Palette

Search for a command to run...

Buying Domains Wrong, Fixing CORS Right - My first time

My first experience with deploying on custom domain and cloudflare internals

Published
3 min read
P

Learning from my experiences while joking about the stupid mistakes I did in my prior code!

Context:

Recently landed a gig to build and deploy a college event website—abcevent.in—with zero prior experience in domains, full-stack deploys, or tight deadlines. Said yes anyway. Why not?

For this blog, I would use the following mock details for the website

Website domain : abcevent.in
Cloudflare domain : abc-event.pages.dev

Domain Purchasing Blunder:

Bought two domains from Hostinger (abcevent.in and abc-event.in) by mistake—confused between them, thought I canceled one checkout, but authorized both payment mandates (mistaking one for renewal).

Got the bank alert later: fudge, double purchase!​
Tried for a refund; they denied it.

Lesson no 1: Double-check every payment—domains are rarely refundable.

I tried for a refund, they denied.


CORS despite allowed origin

  • I completed development of the website, went back and forth a couple of time with the team I was working with, getting requirements, giving suggestions and ideas and planning out a structure.

  • I deployed using Cloudflare Pages, and did a DNS transfer for the domain to cloudflare.

  • Everything worked locally, but production backend failed for website requests (manual health checks passed)—CORS error despite abcevent.in in allowed origins!

  • I knew the cause before checking, CORS. But why? my domain abcevent.in was already present in the allowed origins.

I did some research and realized, when I did the DNS transfer, I did not change my website deployment to my new website. I went with the default option which was simpler (and arguably better).

The issue: my backend was seeing abc-event.pages.dev as the requesting client, which was not in my CORS allowed origins. (P.S. I moved away from * in CORS allowed origin, the risks are too high and not worth the tiny gain at the start of developing)

Cloudflare internally did a CNAME (an alias) for abcevent.in to abc-event.pages.dev.

Whenever someone would hit abcevent.in, it would resolve to abc-event.pages.dev.

abc-events.pages.dev was now my reverse proxy. Really good from the perspective of security, safety, load-balancing. But my backend thought it was a threat! Something not defined in CORS allowed origins.

I updated the CORS allowed origin, updated the .env variable for allowed_origins to include abc-event.pages.dev, and eureka, the issue was resolved.

TL;DR

I didn’t misconfigure Cloudflare.
I misidentified what domain the browser is actually using as Origin.

Learnings

  • Be careful when buying domains or web services online, a lot of them are not refundable. Decide then buy.

  • Got a chance to read and understand Proxies - Forward Proxy, Transparent Proxy, Reverse Proxy - good YT resource

  • Experienced Domain buying, SSL certificate integrations, DNS transfer and hosting first hand. This was a really good part. Simple mostly, but a new domain I was entering.