Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

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
like image 449
ILI Avatar asked Jul 05 '13 14:07

ILI


2 Answers

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.

like image 99
Jamie Starke Avatar answered Nov 15 '22 10:11

Jamie Starke


Browsers don't allow cross domain calls in ajax by default. Jamie Starke gives you the answer. Maybe try to use $.support.cors = true; with JQuery. Anyway, a Phonegap app can do ajax cross domain requests. If you can't, check your config.xml http://docs.phonegap.com/en/edge/guide_whitelist_index.md.html

like image 40
guillaumeb Avatar answered Nov 15 '22 09:11

guillaumeb