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

Question

This is an annoying problem, and I don't think it is just IE that has this problem. Basically, I have a Node.js server from which I make cross-domain calls in order to get some JSON data to display.

It should be a JSONP call, and I give the callback in the url. I'm not sure how to do this?

So, the site (domainA.com) has an HTML page with a JS script like this (everything 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 use 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 to work with cross-domain GET in IE? I searched the internet and there seem to be several different things like jQuery.support.cors = true; which does not work. There also seem to be many lengthy workarounds.

There is no real “perfect” design pattern that I could find for this type of thing.

When I see that I control both the web page and the cross-domain web service, I send to what is best done to ensure compatibility in all versions of IE along with FireFox, Opera, Chrome, etc.

Hooray!

Answer 1

Let's say we have two servers: myServer.com and crossDomainServer.com, both of which we control.

Assuming we want the client myServer.com to retrieve some data from crossDomainServer.com, the client must first 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 process 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 in a wide variety of browsers, including IE 6.

Answer 2

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

 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"});'); });