How can I query localhost server from my website with javascript?

Question

I have a website running on, for example, mydomain.com. Then i am starting local backend server at localhost:3000 (127.0.0.1:3000). Can I add some js code to this website so it will query my local backend? Since my browser and my local backend are on same computer I guess it can access my local backend somehow. I tried creating a codepen https://codepen.io/dranitski/pen/ExNZLJo?editors=1111 with this code:

fetch('http://localhost:3000/').then(r=> r.json().then(j=> console.log('\nREQUEST',j)));

And created test.js file locally with content:

require('http').createServer(function (req, res) { res.end('' + process.pid); }).listen(3000);

then started it with node test.js

But my codepen gives me an error Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://127.0.0.1:3000/'

I can claim backend is working since i can access http://127.0.0.1:3000/ from my browser and see the result successfully.

The idea behind that is to create a website that can interact with backend running locally on user's machine. My users have our backend server started locally and I need an online tool that can query these as well showing them some data from their local backends in human-readable form.

Thanks in advance!

What type of query would you like to run? Query an SQL database? A text file? A file system? Also, I believe Node.js is what you're looking for. Node.js is a backend language built on JavaScript (the V8 engine as far as I'm aware). What you could do is make an XMLHTTP request to a Node.js server, have that Node.js server query the database/file/file system using the user input (make sure it's clean first), and then have the Node.js server return the results. This can all be done with Node.js' built-in http module. — OOPS Studio
– OOPS Studio, Commented Feb 13, 2021 at 21:32
Note that you could also do this with PHP (in a more simple way), but you specifically requested JavaScript. — OOPS Studio
– OOPS Studio, Commented Feb 13, 2021 at 21:32
Have you tried using AJAX? If you really can visit 127.0.0.1:3000 in your browser and this isn't working in your JavaScript then I expect it's a problem with the XMLHttp confit. Try using a simple Ajax get request and console.log both the response and also the error in the error callback if any: w3schools.com/jquery/jquery_ajax_get_post.asp — iJamesPHP2
– iJamesPHP2, Commented Feb 13, 2021 at 21:35
If you need to access your server from the outside, you need to query your external ip address. 127.0.0.1 would be pointing to the localhost you run your script on (codepen server in your case). — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Feb 13, 2021 at 21:37
Yes have just noticed you are using codepen. Why? Codepen runs on codepen, it can't access your localhost — iJamesPHP2
– iJamesPHP2, Commented Feb 13, 2021 at 21:42

Dzmitry Dranitski · Accepted Answer · 2021-02-13 21:44:45Z

4

It works!

Just needed to enable cors on local node server

test.js

require('http').createServer(function(req,res){
    // Set CORS headers
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Request-Method', '*');
    res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
    res.setHeader('Access-Control-Allow-Headers', '*');

    res.end('' + process.pid);

}).listen(3000);

then run it with node test.js

Now the pen can access the server!

answered Feb 13, 2021 at 21:44

Dzmitry Dranitski

7951 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I query localhost server from my website with javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related