Not developing on localhost? Google’s “Authorized JavaScript origins” list can only be configured to use localhost:port (e.g. http://localhost:3000) for development. This poses an annoying problem for those of us that are developing remotely or with a VM.
My current setup has me running a Ubuntu VM using VirtualBox, on a Windows 10 host. Since the disks are shared, I run my IDE on Windows, and use a browser in Windows to point to my VM (e.g. http://192.168.1.10:3000). Google doesn’t like this, and keeps giving me an “origin_mismatch” error when I try to use Google OAuth on this domain.
I’ve tried multiple workarounds, and this is what I found to work:
1. Edit your host file in windows
Open notepad using administrator privilege, and open C:\Windows\System32\drivers\etc\hosts
Add the line `192.168.1.10 www.mysite-dev.com` (or whatever IP your VM/remote server has)
2. Flush DNS
Open command prompt
Run `ipconfig /flushdns`
3. Restart your webserver to use port 80 (or 433 if you’re using ssl)
If you’re using Rails, you can use `thin` to run an ssl server. Otherwise, just use `rails server -p 80`.
If you run into permission errors like I did, prefix your commands with `sudo`. (or `rvmsudo` you’re using RVM)
4. Navigate your browser to `http://www.mysite-dev.com` or `https://www.mysite-dev.com` to make sure it loads
5. Once it loads, update your Google Authorized JavaScript origins to include the above url
6. Try logging in with Google OAuth in your project!
Post a Comment