jquery getJSON doesnt respond, but direct access does

Question

I am migrating my work from an old environment to a newer one. Im in the middle of updating outdated code with newer one and it seems to be running well(my web service written in node.js)

I have my webservice running in node.js and my site using jquery. node.js code

var express = require('express');
var app = express();

app.get('/', function(req, res){
    console.log('GET request to /');
});

app.listen(8888);
console.log('Express server started on port 8888');

Here is my jquery code

$.getJSON('http://URL:8888/getTables', function(data){
    //stuff
});

however in firebug the console shows:

"http://URL.com:8888/getTables 200 OK 64ms"

with no response

if i go to the site directly "http://URL.com:8888/getTables" i get my data.

any ideas what is going on? i'll leave the web service running so you can see what im talking about.

the site that is using it is http://www.URL.com/db/index.html

edit:

  app.get('/getTables', function(req, res){
     console.log('GET request to /getTables');
     getTables(req, res);
     sendJSON(res, 200, cache_tables);
  });

function sendJSON(res, httpCode, body)
{
  var response = JSON.stringify(body);
  res.send(response, {'Access-Control-Allow-Origin': '*'}, httpCode);
}

UPDATE

I found my solution, thanks for letting me know my issue was cross-domain, i thought my sendJSON took care of it but since i upgrading nodejs and the modules it probably become obsolete. Here is the fix for those wondering:

//Middleware: Allows cross-domain requests (CORS)
var allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
}

//App config
app.configure(function() {
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.cookieParser());
  app.use(express.session({ secret: 'secret' }));
  app.use(express.methodOverride());
  app.use(allowCrossDomain);
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

and i had to update all of my gets to use:

 app.get('/', function(req, res, next){
   console.log('GET request to /');
 });

score 1 · Accepted Answer · edited May 23 '17 at 10:24

It's because you're running the server on another port so it's considered x-domain. You could set it up to use JSONP

This SO question goes into more detail How do I send an AJAX request on a different port with jQuery?

Here is another post going into details about CORs http://www.bennadel.com/blog/2327-Cross-Origin-Resource-Sharing-CORS-AJAX-Requests-Between-jQuery-And-Node-js.htm

[update for comment below]

I found a post that has an example setup for using express to serve out jsonp, hopefully this will help...

http://kiwidev.wordpress.com/2011/07/18/node-js-expressjs-and-jsonp-example/

code examples from that post are below:

express app

var express = require('express');

var app = module.exports = express.createServer();

app.configure(function(){
    app.set('views', __dirname + '/views');
    app.set('view engine', 'jade');
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(app.router);
    app.use(express.static(__dirname + '/public'));
});

app.get('/logget', function(req, res){
    console.log('get to log');
    console.log(req.query.callback);
    console.log(req.param('somedata'))

    res.header('Content-Type', 'application/json');
    res.header('Charset', 'utf-8')  
    res.send(req.query.callback + '({"something": "rather", "more": "pork", "tua": "tara"});');  
});

app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

HTML page that access it

<html>
    <head>
        <title>jsonp test</title>
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>      
        <script type="text/javascript">
            $(function(){               
                $('#jsonThingLink').click(function(e){
                    e.preventDefault();
                    console.log('jsonThingLink clicked');                   

                     $.ajax({
                        dataType: 'jsonp',
                        data: "somedata=blahblah",                      
                        jsonp: 'callback',
                        url: 'http://localhost:3000/logget?callback=?',                     
                        success: function(data) {
                            console.log('success');
                            console.log(data);
                            console.log(data.more);                
                        }
                    });
                });             
            });
        </script>
    </head>
    <body>
        <div id="jsonThing"><a href="#" id="jsonThingLink">test jsonp</a></div>    
    </body>
</html>

pardon my ignorance so, i need to adjust my code to "http://jareddlc.com:8888/getTables?callback=?" and what changes do i make to my nodejs web service — Jareddlc, Dec 01 '12 at 04:31
Added another link and added the code found on the page. Hope this helps. — subhaze, Dec 01 '12 at 17:41
I'll test this today. Thank you very much for your help. If i cannot i might have to write my server from scratch since, i was using older versions of node.js and express — Jareddlc, Dec 01 '12 at 17:52

jquery getJSON doesnt respond, but direct access does

1 Answers1