milky_jay milky_jay - 4 months ago 17
Node.js Question

Get data from third party Node.js server hosted on Vagrant VM using jQuery - JSONP

I've got a Node.js server listening on localhost:3000 working as a black box that outputs UI that I want to load into a local website.

The consuming service written in jQuery is:

$('.my_selector').click(function(){
$.ajax({
url: ':3000/',
method: "POST",
success: function(data) {
$("#content").append(data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert('error ' + textStatus + " " + errorThrown);
}
});
});


Instead of visiting the page directly it loads content and appends it to
#content
.

The issue is that the code does not work.




Edit:

If I set
localhost:3000
to
url
I get
XMLHttpRequest Exception
:

jquery.min.js:4 XMLHttpRequest cannot load localhost:3000/. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

Answer

You need to use JSONP to overcome the Cross origin issue. Although both the Node server and your custom visiting webpage are on localhost, please note that there is a huge difference on configuration:

  • your custom visiting webpage is fully hosted on local LAMP stack*.
  • Node is only proxy/reverse-proxy configured locally (thanks to Vagrant automation) !

The real (virtual)IP of the Node server is the one configured on the vagrant VM, you can check it using ifconfig after opening a ssh session towards the VM. This way the HTTP response received from the page hosted locally has a different IP and domain in the header and the Cross origin exception is triggered.

*= supposing for example you are running a LAMP system.

Comments