I recently had one of those moments where I was stuck on a problem whose solution was so obvious, I questioned my intellect.
Everyone has these moments. If you’ve ever played a puzzle game, you’d know what I mean. Like the first time you picked up Portal and you realized that you can go through the orange portal as well - And some of you took hours to figure that out (I know you did, don’t lie to me!)
Obvious right? But not at first. Not when you’re a noob.
I built an app where a user has to authenticate, do stuff, and submit. The forms were AJAX (ugh, I hate that word) so that the page didn’t refresh. I tested on a local server whose url was http://localhost:8888/ on my MacBook (this matters and I’ll get to it, promise).
Easy peasyEverything worked fine. So I pushed to live (in this example it’ll be http://www.radicalradical.com/) - and, wtf my forms weren’t submitting.
Freaking out, I went through the checklist filed under “Work Dammit” :
Refresh. Clear cache. Refresh again. Clear Cookies. Now clear browsing history. Do this on every browser. Test on another machine. Swear at it. Refresh again.
A friend of mine was working nearby and came over to ask me what was wrong.
Well actually, he came to tell me to shut up because my swearing was getting in the way of his work. But he then asked what was wrong.
After showing him a demo on my local server, then on live, we cracked open console and found that it was Cross Domain Issue.
On to the next problem: what the hell was the causing the cross domain error? I wasn’t POSTing anywhere else except in my app!
Freaking out again, I started Googling. Luckily my friend was there and pointed out the form action URL vs the URL in the browser:
To which I respond, “dude what’s your point?”
Here’s that moment I told you about
“They’re not the same domain, therefore you’re getting a cross domain issue. ‘www’ is a subdomain of domain.com, or in your case, radicalradical.com”
So, I redirect anybody from radicalradical.com to www.radicalradical.com and it worked like a charm.