Question

So I know this is a common problem and have seen a lot of people talking about it but feel that my situation is unique and maybe not as involved as others.

I have a host website and trying to build an iPhone app with JQ and PhoneGap.

I want people to be able to pass their score to my home domain from the app but am getting the dreaded:
“Origin null is not allowed by Access-Control-Allow-Origin.”
when I try and call this:

$.ajax({
        type: "POST",
        url: 'http://www.homesite.com/thephppage.php',
        data: {
            'guid': '12333-54',
            'score': 52,
            'initials': 'tod'
        },
        success: function (data) {
            try {

                }
                else {

                }
            }
            catch (err) {
                alert(err);
            }
        },
        error: function (xhr) {
            alert(xhr.responseText);
        }
    });

Since this is calling out to a domain I own, is there something simple I can do to rectify this issue?

Thanks.
T

Answer 1

WORKING!!! OH GLORY!!! (sort of): Here’s what I did…

Instead of use the .ajax, I went the JSONP route (sort of) and added a tag to my head dynamically like so:

var head = document.getElementsByTagName('head')[0];
  script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://thesite.co/thepage.php?var1=123&var2=432&var3='ttt';
  head.appendChild(script);

I didnt even have to give it a CALLBACK method because (since I own the target site and know its coming) on my PHP side, I wrap the return with a methodName like this:

$encoded = json_encode($json);
echo “testMethod(” . $encoded . “)”;
This worked marvelously EXCEPT IN MY DARN iPhone and iPad simulators!!! (gosh I need to buy the real devices…) So I STILL dont know if this works on the actual devices but it works now in Chrome AND Safari… lets hope I can figure out how to make it work on that phone!

THANKS to everyone for their help!

==========SECOND BETTER MOBILE SOLUTION====================== This works better than the JSONP – dynamic Script solution…

In your head under your Phonegap and JQ calls insert this tag.

<script type="text/javascript">
        $(document).bind("mobileinit", function () {
           $.mobile.allowCrossDomainPages = true;
        });
    </script>

Then in your Phonegap.plist file in your XCODE Resources folder, add the domain to External Domains… ie. phonegap.com. (Leave off http or www).