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

Question

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

so what's the point? hope that `url: ':3000/'` contain the full absolute url of the node server. If you GET a page why you `method: "POST"` code? — morels, Jul 07 '16 at 12:35
@morels If I use localhost:3000, I get the following error, `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.` But without it seems to work I copied the sample from another answer here — milky_jay, Jul 07 '16 at 12:37
right. you need to use [JSONP](https://learn.jquery.com/ajax/working-with-jsonp/) please see this solution [Basic example of using .ajax() with JSONP](http://stackoverflow.com/questions/5943630/basic-example-of-using-ajax-with-jsonp) — morels, Jul 07 '16 at 12:43
Change your url to just '/', if your page is already on localhost:3000. — knownasilya, Jul 07 '16 at 13:32
@morels isn't JSONP for different domains? They are both on localhost. Although that did work thanks! — milky_jay, Jul 08 '16 at 06:27

score 1 · Answer 1 · answered Jul 07 '16 at 14:15

1

Use url: "/" the default host name use is current in url window.location.host in your case localhost:3000. Just specify / for path

answered Jul 07 '16 at 14:15

Jules Goullee

571
4
11

score 1 · Accepted Answer · edited May 23 '17 at 11:58

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.

score 0 · Answer 3 · answered Jul 07 '16 at 14:27

0

Change url: ':3000/', to url : "http://127.0.0.1:3000".

answered Jul 07 '16 at 14:27

The Dark Knight

695
4
10

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

3 things you need to do:

url: ':3000/' is incorrect, you need to change it to url: 'localhost:3000'
You need to put your HTML, javascript, css, ... files on a web server (such as apache, nginx, ..) which is running on your localhost (e.g: localhost:4000). Don't open the HTML file by right clicking then choose open with Chrome or thing like that, it won't work. And access the page which contain that javascript file (e.g: localhost:4000/page-contain-your-javascript.html)
Deal with cross domain issue:

Use a reverse proxy such as nginx to dispatch request to localhost:3000/page-contain-your-javascript.html to localhost:4000/page-contain-your-javascript.html. And now, when you access localhost:3000/page-contain-your-javascript.html your javascript and API now in the same domain (localhost:3000), you can use AJAX normally.

Hope that it can help you :)

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

4 Answers4