node.js, express and different ports - node.js

Question

I've been playing with node.js and then came across the express framework. I can't seem to get it to work when different ports are being used.
I have my ajax on http://localhost:8888 which is a MAMP server I'm running on my Mac.
$.ajax({
url: "http://localhost:1337/",
type: "GET",
dataType: "json",
data: { },
contentType: "application/json",
cache: false,
timeout: 5000,
success: function(data) {
alert(data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert('error ' + textStatus + " " + errorThrown);
}
});
As you can see my node.js server is running on http://localhost:1337/. As a result nothing is getting returned and it's throwing an error.
Is there a way around this?
Thanks
Ben

Answer 1

The problem you have is that you are trying to make a cross-origin request and that's not allowed by browsers (yes, the same hostname with a different port counts as a different origin for this purpose). You have three options here:
1. Proxy the request.
Do this one if you can. Write some code that runs on the :8888 server
that proxies requests to the 1337 one. You can also do this by
sticking a proxy in front of both of them, something like Nginx is
pretty good at this and easy to set up
2. Use CORS (Cross Origin Resource Sharing)
See: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing and https://developer.mozilla.org/en/http_access_control
This means adding some headers to your responses to tell the browser that cross-origin requests are ok here. In your Express server add middleware like this:
function enableCORSMiddleware (req,res,next) {
// You could use * instead of the url below to allow any origin,
// but be careful, you're opening yourself up to all sorts of things!
res.setHeader('Access-Control-Allow-Origin', "http://localhost:8888");
next()
}
server.use(enableCORSMiddleware);
3. Use JSONP
This is a trick where you encode your "AJAX" response as Javascript code. Then you ask the browser to load that code, the browser will happily load scripts cross-origin so this gets round the cross-origin issue. It also lets anyone else get round it as well though, so be sure that's what you want!
On the server side you need wrap your response in a Javascript function call, express can do this for automatically if you enable the "jsonp callback" option like this:
server.enable("jsonp callback");
Then send your response using the "json()" method of response:
server.get("/ajax", function(req, res) {
res.json({foo: "bar"});
});
On the client side you can enanble JSONP in jQuery just by changing "json" to "jsonp" in the dataType option:
dataType: "jsonp",