Cross-domain jQuery.getJSON from a Node.JS (using express) server does not work in Internet Explorer

Question

This is an annoying problem, and I don't suppose that it's only IE that has this problem. Basically I have a Node.js server, from which I am making cross-domain calls to get some JSON data for display.

This needs to be a JSONP call and I give a callback in the URL. What I am not sure is, how to do this?

So the website (domainA.com) has an HTML page with a JS script like this (all works fine in Firefox 3):

<script type="text/javascript">
    var jsonName = 'ABC'
    var url = 'http://domainB.com:8080/stream/aires/' //The JSON data to get
    jQuery.getJSON(url+jsonName, function(json){                
       // parse the JSON data
       var data = [], header, comment = /^#/, x;                    
       jQuery.each(json.RESULT.ROWS,function(i,tweet){ ..... }
    }
    ......
</script>

Now my Node.js server is very simple (I'm using express):

var app = require('express').createServer();
var express = require('express');
app.listen(3000);

app.get('/stream/aires/:id', function(req, res){
  request('http://'+options.host+':'+options.port+options.path, function (error, response, body) {
      if (!error && response.statusCode == 200) {
          console.log(body); // Print the google web page.
        res.writeHead(200, {
             'Content-Type': 'application/json',
               'Cache-Control': 'no-cache',
             'Connection': 'keep-alive',
               'Access-Control-Allow-Origin': '*',
             'Access-Control-Allow-Credentials': 'true'
      });

            res.end(JSON.stringify(JSON.parse(body)));
         }
       })
    });

How can I change these two so they will work with cross-domain GET in IE? I have been searching the internet and there seem to be a few different things like jQuery.support.cors = true; which does not work. There also seem to be a lot of lengthy workarounds.

There is no real 'ideal' design pattern which I have been able to find for this type of thing.

Seeing as I have control over both the web page and the cross domain web service I'm sending to what is the best change to make to ensure compatability across all IE versions along with FireFox, Opera, Chrome etc?

Cheers!

Thanks, already know this, hence my question how to use JSONP? In that question JSONP was not used... — NightWolf
– NightWolf, Commented Sep 29, 2011 at 15:07
Sorry, missed that bit. How about this giantflyingsaucer.com/blog/?p=2682. Use the jsonp and jsonpCallback properties. Your server side code needs to read these parameters and wrap a function call around your data. — Paul Grime
– Paul Grime, Commented Sep 29, 2011 at 16:27

David EGP · Accepted Answer · 2011-09-30 03:07:08Z

8

Say we have two servers, myServer.com and crossDomainServer.com, both of which we control.

Assuming we want a client of myServer.com to pull some data from crossDomainServer.com, first that client needs to make a JSONP request to crossDomainServer.com:

// client-side JS from myServer.com
// script tag gets around cross-domain security issues
var script = document.createElement('script');
script.src = 'http://crossDomainServer.com/getJSONPResponse';  
document.body.appendChild(script); // triggers a GET request

On the cross-domain server we need to handle this GET request:

// in the express app for crossDomainServer.com
app.get('/getJSONPResponse', function(req, res) {
  res.writeHead(200, {'Content-Type': 'application/javascript'});
  res.end("__parseJSONPResponse(" + JSON.stringify('some data') + ");");  
});

Then in our client-side JS we need a global function to parse the JSONP response:

// gets called when cross-domain server responds
function __parseJSONPResponse(data) {
  // now you have access to your data 
}

Works well across a wide variety of browsers, IE 6 included.

answered Sep 30, 2011 at 3:07

David EGP

7,1392 gold badges20 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Moeller Over a year ago

This works great. Here is a link for greasemonkey users.

Eduardo Mohedano · Accepted Answer · 2012-09-09 03:19:25Z

0

The following code shows how to handle the GET request (using express) and how to wrap the JSON response using the callback given:

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

answered Sep 9, 2012 at 3:19

Eduardo Mohedano

1

1 Comment

Sean Vieira Over a year ago

Shouldn't the content-type be "application/javascript"? (since JSONP works by being sent over as JavaScript).

Collectives™ on Stack Overflow

Cross-domain jQuery.getJSON from a Node.JS (using express) server does not work in Internet Explorer

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related