Railsgrammer

If you are testing any javascript app against a web service and you run into the following error in your javascript console:

XMLHttpRequest cannot load http://localhost:3000/. Origin http://myapp.dev is not allowed by Access-Control-Allow-Origin.

In this context it means that the host your are making the request from does not have permission to access the requested resource (it also means a lot of other things).  After hunting you can do a at least 2 things:

1. Add the host to the access list by adding to the request header (http://enable-cors.org/)

2. Load the app using file:/// rather than the host.

Because I was writing this app as a native mobile app for iOS, Android, etc. I found out that PhoneGap loads the html files using the file:/// protocol.  So now, when I am developing on my computer, as long as I use the file:/// protocol, I have no problem with access to my API.

My mobile app continues. As I was testing my registration API through the iOS emulator I got the following error:

MyApp [97185:15603] ERROR whitelist rejection: url='http://localhost:3000'

After some quick google searching, I discovered that in order to make requests outside of the file system I had to add the host to the phone gap’s plist file. For my project this file is located at /MyApp/PhoneGap.plist. You can either edit this file with a text editor or edit it in Xcode. The end result for me to be able to hit localhost within the app looks like this:

<?xml version="1.0" encoding="UTF-8"?>
...
<key>ExternalHosts</key>
<array>
<string>localhost</string>
</array>
...

After I made that change, I restarted my app through Xcode and the app was able to hit the rails server.