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!

Answer 1

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.