milky_jay milky_jay - 1 year ago 42
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:

url: ':3000/',
method: "POST",
success: function(data) {
error: function(jqXHR, textStatus, errorThrown) {
alert('error ' + textStatus + " " + errorThrown);

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

The issue is that the code does not work.


If I set
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 Source

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.