Access-Control-Allow-Origin error when getting WordPress posts in Phonegap app

1 Views

Hopefully someone can help me to resolve the following problem while developing a mobile app in phonegap. I am attempting to read posts from a wordpress installation but I get this error when I run my index.html page on chrome

XMLHttpRequest cannot load Origin null is not allowed by Access-Control-Allow-Origin.

Read More

I have JSON-API plugin installed in wordpress and when I navigate to the page I want I can view it ok. My code is as follows: 

<!DOCTYPE HTML>
<html>
<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
    function readSinglePost (url,target_div) {
        var URL = url//+"&callback=?";
            console.log(URL);
            jQuery.ajax({
                url: URL,
                dataType: 'json',
                success: function(data) {
                console.log(data);
                jQuery(target_div).append("<h1>"+data.post.title+"</h1>");
                jQuery(target_div).append(data.post.content);jQuery(target_div).
                append("<small>"+data.post.date+"</small>");
                console.log(data.post.content);
            }
        });
    }
    jQuery(document).ready(function() {
        var url = "http://www.example.com/api/get_post/?json=get_post&dev=1&id=5486";
        var target_div = "#contents";

        readSinglePost(url, target_div);
    });
</script>
</header>
<body>
<div id="main">
    <div id="title"></div>
</div>
</body>
</html>

UPDATE
In response to Jamie below

Raw Request 

GET /api/get_post/?json=get_post&dev=1&id=5486 HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
DNT: 1
Origin: null
Connection: keep-alive

Raw Response 

HTTP/1.1 200 OK
Date: Fri, 05 Jul 2013 16:51:49 GMT
Server: Apache/2.2.11 (Unix)
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
X-Pingback: http://www.example.com/xmlrpc.php
Set-Cookie: PHPSESSID=f6308c2732752bbb1149b345018bdf68; path=/
Set-Cookie: wc_session_cookie_a111a960a9b29354988b3de48943ad50=IRhSF41ZHIBHMA3mmCCSSjdOSxqXf2wj%7C%7C1373215910%7C%7C1373212310%7C%7Cd472ed970a72ba78e8b2c836a1d8b2cc; expires=Sun, 07-Jul-2013 16:51:50 GMT; path=/; httponly
Set-Cookie: woocommerce_items_in_cart=0; expires=Fri, 05-Jul-2013 15:51:50 GMT; path=/
Set-Cookie: woocommerce_cart_hash=0; expires=Fri, 05-Jul-2013 15:51:50 GMT; path=/
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/plain; charset: UTF-8
Content-Length: 57602
Post Views: 1

Related posts

Leave a Reply

4 comments

  1. So the problem that you are running into is commonly referred to as Cross Origin Security. Basically, most web-browsers will not allow you to pull in content from servers outside your own, unless the server says it is ok. To do this, the server needs to see an acceptable Access-Control-Allow-Origin in the headers.

    The good news is that this is fairly easy to fix, as Bowdenweb points out in How to Enable cors in WordPress.

    You only need to add the appropriate header to the headers.php file, like so

    <?php /** @package WordPress @subpackage Default_Theme  **/
header("Access-Control-Allow-Origin: *"); 
?>
<!DOCTYPE html>

    Update 1

    As ILI pointed out, there is a plugin for WordPress called WordPress-Cross-Domain-Plugin which resolved this issue for him.

  3. in plist file add

 <key>NSAppTransportSecurity</key>


<dict>
    <key>NSExceptionDomains</key>
         <dict>
             <key>yourdominename.com</key>
                    <dict>
                      <!--Include to allow subdomains-->
                      <key>NSIncludesSubdomains</key>
                      <true/>
                      <!--Include to allow HTTP requests-->
                      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                      <true/>
                      <!--Include to specify minimum TLS version-->
                      <key>NSTemporaryExceptionMinimumTLSVersion</key>
                      <string>TLSv1.1</string>
                </dict>
          </dict>
</dict>

    in config file 

     <preference name="BackupWebStorage" value="none" />