How to make a jQuery request to a locally hosted node.js server?

Question

I have a simple node.js server saved in a file called server.js, the code for which is below:

var http = require('http');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(8010);

I am running this locally in command line (with node.js installed) by executing

node server.js

If I then access this in my browser (google chrome) with the URL my.local.IP.address:8010 it displays hello world successfully.

I am also creating a webpage that will execute this jQuery as soon as the page is loaded:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>    
    $(document).ready(function(){
        $.get("http://my.local.IP.address:8010/", function(){
            alert("Success");
        }).fail(function(err){
            alert("Failed");
            alert(JSON.stringify(err));
        });
    });
</script>

When I open this html file in my browser it always creates an alert box saying failed followed by this stringified JSON object as the error (I've formatted it so it is easier to read):

{
"readyState": 0,
"status" : 0,
"statusText": "error"
}

This happens no matter how many times I've tried while the node.js server is running locally. I have also tried to make an async XMLHTTP request function that does it myself, and this does not work either.

I know both the jQuery and the XMLHTTP function I made work correctly since if I call the functions on the URL https://httpbin.org/get it will return successfully.

Any ideas as to where I have gone wrong?

Use the relative url for your ease, simply go to `/` to start from `http://localhost:8010`. So try `$.get('/', function() { alert('success'); }` — Icepickle, Apr 11 '16 at 15:26

score 3 · Accepted Answer · answered Apr 11 '16 at 15:28

3

It's a cross domain issue. Browser thinks your page is not part of http://localhost:8081 server. You need to change server code as follows in order to make it work.

http.createServer(function (req, res) {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(8010);

answered Apr 11 '16 at 15:28

Phagun Baya

2,127
1
18
27

But its not safe any one can make a request – Alok Deshwal Apr 11 '16 at 15:35
Agreed this is not safe. For making html pages work locally, it's fine. For best practices @Adam0410 will need to use express templating or just host the html pages on the express server. – Phagun Baya Apr 11 '16 at 15:41

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

I guess it may be a cross domain issue, as you are using your IP address in the call, and localhost:8010 on the browser url to access your site. It is a problem common to ajax requests, and has nothing to do with Node.js

Try using the same url to access the site than the one you are targeting to.

See this similar issue with cross domain

edited May 23 '17 at 12:07

Community

1
1

answered Apr 11 '16 at 15:22

Daniel

209
1
3
12

Can you try rewording it please? What do you mean 'try using the same url to access the site than the one you are targeting to?" What site? and what target? – Adam Griffiths Apr 11 '16 at 15:25
Sorry. I meant using the same URL in the browser navigation bar than in the AJAX URL target (`$.get("http://my.local.IP.address:8010/"... `), either trying with localhost, or the actual IP. I missed the line where you pointed out you were doing that. – Daniel Apr 12 '16 at 16:17

How to make a jQuery request to a locally hosted node.js server?

2 Answers2